动态添加行到 <table>答案

【问题标题】：Adding rows to <table> dynamically动态添加行到 <table>
【发布时间】：2012-06-08 20:01:41
【问题描述】：

我在asp.net中有下表：

 <table style="width: 98%" id="tblOtherDoc">
    <tr>
       <td style="width: 10; text-align: left;">
          <span">Documents:</span>
       </td>
    </tr>
    <tr>
       <td>
          <asp:HiddenField ID="hidOtherPath" runat="server" Value='<%# Bind("UploadLocationOther") %>' />
          <a href="#" style="font-size: 12px; color: #2014FF; float: left; vertical-align: middle" onclick="uploadNew(this)">Add Other</a> <span style="float: left;">
          <asp:CheckBox ID="cbOther" runat="server" onclick="otherDocsClicked(this)" Checked='<%# Bind("OtherAttached") %>' /></span>
          <a href="#" style="font-size: 12px; color: #2014FF; float: left; vertical-align: middle" onclick="downloadFile(this)" title="docOther">View</a>
        </td>
     </tr>
  </table>

每次单击复选框时，我都会使用 jquery 在表中添加一个新的精确行（以便可以添加多个文档）。

// Add new area for Other Document attachements
    function otherDocsClicked(row) {
        var isChecked = $(row).closest("tr").find("input[type=checkbox][id*=cbOther]").is(':checked');

        if (isChecked == true) {
            var clone = $('#tblOtherDoc tbody>tr:last').clone(true);
            clone.find("input[type='hidden'], select").val("");              
            clone.find("input[type='checkbox'], checked").removeAttr('checked');
            clone.insertAfter('#tblOtherDoc tbody>tr:last');
        }
    }

当我执行 get 返回已添加的文档列表时，我想知道如何使用 C# 动态添加这些行。

或者，如果有人认为有更好的方法来做到这一点，我将非常感谢任何意见，因为这是我能想出的唯一解决方案，而且它似乎给我带来的麻烦比其他任何事情都多。

【问题讨论】：

标签： c# asp.net html-table

【解决方案1】：

可以使用asp.net表格控件：

Table Control

例如。在c#代码中添加一行：

TableRow row = new TableRow();
                TableCell cell = new TableCell();
                cell.Controls.Add(new TextBox());
                row.Cells.Add(cell);
                table.Rows.Add(row);

在您的 .aspx 页面中：

<asp:Table ID="table" runat="server" />

【讨论】：

我已经尝试过使用它，但我在使用时遇到的问题是我在 CheckBox 上的 onclick（我调用 jquery 来添加另一个重复行）不再触发。

【解决方案2】：

使用 Kapils 答案，但从复选框中删除 jquery 代码。使用 jquery 附加到 onclick 事件。代替复选框详细信息中的 onclick="otherDocsClicked(this)" ，为复选框添加一个类，例如。 chkDoSomething 然后执行以下操作。

$(".chkDoSomething").live('change',function(){
     //your code goes here.
 }

然后你应该能够像 Kapil 建议的那样在 c# 中添加行并且你的 jquery 应该仍然触发

【讨论】：