2

我正在使用 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用列名填充复选框的属性。

问题

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

在此处输入图像描述

4

2 回答 2

2

您应该查看JQuery 的 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>

在执行. _ name_ 您也可以使用 jQuery。要查找每个元素:idvalueappendToinput

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
}
于 2013-02-20T16:56:20.763 回答
2

Andy 的答案更简洁,您可能希望在修改其中的元素时这样做。但是,如果它不是“复制但不同”的情况,而更多的是“复制某些部分的新行”,那么这个分叉可能会有所帮助

这里的技术涉及创建一个新行,然后使用jQuery 的 each 方法迭代每个所需的表头(在此处指定为#Row1 th:not(.space)在表中选择,即“#Row1不是的表头.space”),使用jQuery 的修剪来获取它们的内部没有多余空格(换行符,缩进)的文本,然后附加一个新单元格并输入该值作为每个单元格的名称。

于 2013-02-20T17:06:14.553 回答