jQueryを使用してASP .NETでテーブル行を動的に追加/削除する問題

Question

複数の電子メール受信者を入力できるユーザーコントロールがあります。 ページの読み込み時に、名前と電子メールアドレスのテキストボックス（削除ボタンなし）を含むテーブル行が1つあります。

他のすべての行がjQueryを使用して追加されています。特定の行を削除します。以下は私のコードです：

<div> 
<table cellspacing="5" runat="server" id="tblEmailRecipients" clientidmode="Static"> 
    <tr> 
     <td colspan="4">Custom Email Recipients</td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <input type="button" value="Add More" onclick="AddNewTableRow();" id="btnAdd" /> 
     </td> 
    </tr> 
    <tr style="font-weight:bold"> 
     <td>Name</td> 
     <td>Email Address</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td><asp:TextBox runat="server" ID="txtName" ></asp:TextBox> </td> 
     <td><asp:TextBox runat="server" ID="txtEmailAddress" ></asp:TextBox> 
       <asp:RegularExpressionValidator ID="regexValidatorEmailAddress" runat="server" ErrorMessage="Invalid Email Address" ControlToValidate="txtEmailAddress" 
        Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator> 
     </td> 
     <td> 
      <%--<input type="button" value="Remove" onclick="DeleteTableRow(this);" id="btnRemove" name="btnRemove" />--%> 
     </td> 
    </tr>   
</table> 
</div> 
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" 
    style="height: 26px" /> 

のjQuery：

function DeleteTableRow(ctrl) { 
    //delete control table row 
    $($(ctrl).closest("tr")).remove(); 
} 

function AddNewTableRow() { 
    //Get Row clone and add as last row 
    //Also, created row clone but with different control ids 
    var i = $("#tblEmailRecipients tr").length; 
    var newRow = $("#tblEmailRecipients tr:last").clone().find("input").each(
     function() { 
      $(this).attr({ 
       'id': function (_, id) { return id + i }, 
       'name': function (_, name) { return name + i }, 
      }); 
     }).end(); 

    $("#tblEmailRecipients tr:last").after(newRow); 
    $("#tblEmailRecipients tr:last input:text").val(""); 

    //Add 'Remove' button in the last column - this needs to be done only for second row, all rows after 2nd row will auto. contain Remove button as they are cloned from prev. row 
    var lastCell = $("#tblEmailRecipients tr:last td:last"); 
    var lastCellContents = jQuery.trim($(lastCell).html()); 

    if (lastCellContents == '') { 
     var btnRemoveName = "btnRemove" + i; 
     var btnRemove = "<input type='button' value='Remove' onclick='DeleteTableRow(this);' id='" + btnRemoveName + "' name='" + btnRemoveName + "' />"; 
     $(btnRemove).appendTo($(lastCell)); 
    }  

    //Move focus to newly added row Textbox 
    $("#tblEmailRecipients tr:last input:first").focus(); 
} 

btnSave_Click、
を処理しながら、私が直面しています問題は、私は背後にあるコードでは、2人以上の受信者（テーブルの行）を追加する場合であってもです - 私は電子メール受信者を含む最初のテーブルの行だけを参照してください。

なぜ私は実行時に追加された他のテーブル行にアクセスできないのだろう...ポストバック後にUIに行方不明になるのだろうか？

ご案内ください。

ありがとうございました！

Answer 1

各行の編集ボックスに動的なIDを与えようとすると、各行のすべての編集ボックスに同じIDが与えられます.IDは各行ごとに異なる必要があります。