使用jQuery在ASP .NET中动态添加/删除表格行问题

我有一个用户控件，它允许用户输入多个电子邮件收件人。网页加载，我有一个包含使用jQuery被添加使用jQuery在ASP .NET中动态添加/删除表格行问题

所有其他表中的行，因此加入每一行都有一个删除按钮，其允许用户的姓名和电子邮件地址的文本框（与出删除按钮）一个表行删除一个特定的行。下面是我的代码：

<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上丢失？

请您指导。

谢谢！

来源

2011-07-06 iniki

尝试给每行中的编辑框赋予动态ID，您将在每行中给出所有编辑框相同的ID。每个行的ID应该不同。

来源

2011-07-06 14:25:39 Pukhoo

感谢您的回复。修改我的问题来更新克隆的控制ID。现在它不会将文本框内容组合在一起，但我仍然只能看到第一个电子邮件收件人（在加载页面时出现的表格行）。 – iniki

嗯，基本上你正在使用客户端脚本（jquery）添加新行，它显示用户添加了一个新行，但服务器无法知道添加了新行并且服务器端代码没有添加新行。您应该添加一个计数器或某个变量来通知服务器必须添加新行。 – Pukhoo

我最近做了这样的使用面板和委托在asp.net c＃中的页面加载，而不是使用JavaScript。 – Pukhoo

使用jQuery在ASP .NET中动态添加/删除表格行问题

回答

相关问题