テーブルに行を動的に追加する

Question

ここでは、1つのテキスト領域と2つのドロップダウンを行にしてモーダルポップアップウィンドウを表示しようとしています。そして私は同じポップアップウィンドウで "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> 

これはモーダルポップアップ設計用です。

<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> 

私は1つの行が追加する必要があります "AddNewRow" ボタンをクリックすると、これらはここで

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

、モーダルポップアップのボタンです。

残念ながら表示できません。上記のJavaスクリプトのエラーは何ですか？助けてください。

Answer 1

あなたのコードではどうなりますか？あなたは、<ASP:Button>コントロールを使用してJavaScript関数をトリガーしています。以下のようなHTML <button>を使用することをお勧めし：

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

OR

あなたはサーバー側のコントロールを使用したい場合は、あなたのコードに必要なOnClientClick いくつかの変更後にトリガポストバックを停止する必要があります。
まずあなたfunction addRow() {
でreturn false;を追加し機能していない何OnClientclick= "return addRow()"