使用 jQuery 向 HTML 表中添加行和列答案

【问题标题】：Adding rows and columns to an HTML table using jQuery使用 jQuery 向 HTML 表中添加行和列
【发布时间】：2013-02-20 16:46:26
【问题描述】：

我正在使用 jquery 向表中动态添加列和行。

我遇到的问题是我正在使用如下代码添加行：

        $('#colorgrid').append("<tr id='Row2' class='input-row'><td><input type='text' name='shade' placeholder='shade'/></td><td ><input type='checkbox' name='asdf'/></td><td ><input type='checkbox' name='shade'/></td><td ><input type='checkbox' name='color'/></td></tr>")

所以在我添加一列然后添加一行之后，它缺少一个复选框。请看下面的屏幕截图：

理想情况下，无论何时添加新行，我都希望它用复选框填充许多列，并用列名填充复选框的 name 属性。

问题

我怎样才能以这种方式添加新行，使其真正动态化，并且我不会对行的内容进行硬编码。它应该用复选框填充所有列，并将它们命名为与列标题相对应。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

Andy 的答案更简洁，您可能希望在修改其中的元素时这样做。但是，如果不是“复制但不同”的情况，而更多的是“复制某些部分的新行”，this fork might help。

这里的技术涉及创建一个新行，然后使用jQuery's each method 遍历每个所需的表头（此处指定在表中选择#Row1 th:not(.space)，即“#Row1 中的表头不是@ 987654326@")，使用jQuery's trim 使其内部文本没有多余的空格（换行符、缩进），然后附加一个新单元格并输入该值作为每个单元格的名称。

【讨论】：

【解决方案2】：

您应该查看JQuery's Clone function。您可以克隆最后一行或第一行，而无需实际对要添加的元素进行硬编码。这将复制所有元素，包括新列。

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$('.hello').clone().appendTo('.container');

这应该会产生

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
  <div class="hello">Hello</div>
</div>

在执行appendTo 之前，您可以修改每个元素的name、id 和value（如果需要）。你也可以使用 jQuery。查找每个input 元素：

newRow.find('input').each(function () {
    var $inputElem = $(this);
    $inputElem.attr('id', 'newId'); //change this to something more dynamic
    $inputElem.attr('name', 'newName'); //change this to something more dynamic
}

【讨论】：