jQuery를 사용하여 ASP .NET에서 테이블 행을 동적으로 추가/제거 할 때 발생하는 문제

Question

사용자가 여러 전자 메일받는 사람을 입력 할 수있는 사용자 정의 컨트롤이 있습니다. 페이지로드시 이름 및 전자 메일 주소 텍스트 상자 (제거 단추 제외)가 포함 된 테이블 행이 하나씩 있습니다.

다른 모든 테이블 행은 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(); 
} 

내가 뒤에있는 코드에서, 2 명 이상의 수신자 (테이블 행)을 추가하더라도 btnSave_Click,
을 처리하는 동안 내가 직면하고 문제입니다 - 전자 메일받는 사람이 포함 된 첫 번째 행만 보았습니다.

런타임에 추가 된 다른 테이블 행에 액세스 할 수없는 이유가 궁금합니다. 다시 게시 한 후에도 UI에서 누락 될 수 있습니까?

안내해주세요.

감사합니다.

Answer 1

각 행의 편집 상자에 동적 ID를 부여하면 모든 행의 ID가 동일한 모든 편집 상자가 제공됩니다. 각 행마다 id가 달라야합니다.