Javascript 在表中动态添加行

在这里，我试图显示一个文本区域和两个下拉列表在一行模式弹出窗口。我试图通过点击同一弹出窗口中的“AddNewRow”按钮来添加行。为此，我编写了Javascript函数

    Java Script function for Adding row.   
    <SCRIPT TYPE="text/javascript">

          function addRow() {
              var tbody = document.getElementById(modaltable).getElementsByTagName("TBODY")[0];
              // create row
              var row = document.createElement("TR");
              // create table cell 1
              var td1 = document.createElement("TD");
              var strHtml1 = "<FONT SIZE=\"+3\"></FONT>";
              td1.innerHTML = strHtml1.replace(/!count!/g, count);

              var td2 = document.createElement("TD")
              var strHtml2 = "<SELECT NAME=\"Alpha-Numeric Scramble\"><OPTION VALUE=\"Alpha-Numeric Scramble\">Alpha-Numeric Scramble<OPTION VALUE=\"Packed-Decimal Scramble\">Packed-Decimal Scramble<OPTION VALUE=\"Date-Time Scrambler\">Date-Time Scrambler</SELECT>";
              td2.innerHTML = strHtml2.replace(/!count!/g, count);

              var td3 = document.createElement("TD")
              var strHtml3 = "<SELECT NAME=\"Yes\"><OPTION VALUE=\"Yes\">Yes<OPTION VALUE=\"No\">No</SELECT>";
              td2.innerHTML = strHtml3.replace(/!count!/g, count);

              row.appendChild(td1);
              row.appendChild(td2);
              row.appendChild(td3);

              count = parseInt(count) + 1;
              // append row to table
              tbody.appendChild(row);

          }
              </script>

用于添加行的Java脚本函数。 函数addRow（）{ var tbody=document.getElementById（modaltable.getElementsByTagName（“tbody”）[0]； //创建行 var行=document.createElement（“TR”）； //创建表单元格1

---

var td1=document.createElement（“TD”）； var strHtml1=“”； td1.innerHTML=strHtml1.replace（/！count！/g，count）； var td2=document.createElement（“TD”） var strHtml2=“字母数字加扰压缩十进制加扰日期时间加扰器”； td2.innerHTML=strHtml2.replace（/！count！/g，count）； var td3=document.createElement（“TD”） var strHtml3=“YesNo”； td2.innerHTML=strHtml3.replace（/！count！/g，count）； 第3行。追加子项（td1）； 第3行。追加子项（td2）； 第3行：追加子项（td3）； count=parseInt（count）+1； //将行追加到表中 tbody.appendChild（世界其他地区）； } 这是为模态弹出设计

    <table class="table .table-responsive" id ="modaltable">
    <tbody>
            <tr>
            <td ><textarea class="form-control" id="comment" ></textarea></td>
            <td ><div class="dropdown">
                <asp:DropDownList ID="DropDownList2" runat="server" CssClass="selectpicker">
                    <asp:ListItem Text="Alpha-Numeric Scramble"/>
                    <asp:ListItem Text="Packed-Decimal Scramble"/>
                    <asp:ListItem Text="Date-Time Scrambler"/>
                    </asp:DropDownList>
             </div></td>
            <td><div class="dropdown">
             <asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectpicker">
                 <asp:ListItem Text="Yes"/>
                    <asp:ListItem Text="No"/>
             </asp:DropDownList>

             </div></td></tr></tbody></table>

这些是模式弹出窗口中的按钮

 <div class="modal-footer">
                <asp:Button ID="Addnewrow" runat="server" CssClass="btn btn-primary" Text="Add New Row" OnClientclick= "addRow()"/>

在这里，如果我单击“AddNewRow”按钮，应该添加一行

---

不幸的是，无法显示。上面的Java脚本中有什么错误。请提供任何帮助。

以下是代码中发生的情况。您已经使用了

控件来触发javascript函数。最好使用HTML

，如下所示：

<button ID="Addnewrow" class="btn btn-primary" onclick= "addRow()"> Add New Row </button>

添加新行

或

如果要使用服务器端控件，则应停止在客户端单击后触发的回发 代码中需要进行一些更改
首先添加

返回false函数addRow（）{

---

然后使用

OnClientclick=“return addRow（）”

什么不起作用？OnClientclick=“addRow（）”此函数没有触发单击按钮时发生的事情？没有发生，先生。只是关闭弹出窗口。因为这是回发到服务器..sir在更改同样的事情发生后。var td1=document.createElement（“TD”)；var strHtml1=“”；td1.innerHTML=strHtml1.replace（/！count！/g，count）；在此处获取错误。我应该使用什么来代替“TD”。这里的count是什么？您想在

中写什么？它应该是

var strHtml1=“”；

和

var strHtml2=“字母数字加扰十进制加扰日期时间加扰器”

Sir它正在工作。但不幸的是，它正在自动关闭。按addRow（）。添加行后，它将关闭窗口。