使用jQuery将行和列添加到HTML表格

我正在使用jquery向表中动态添加列和行。使用jQuery将行和列添加到HTML表格

我遇到的问题是，我有如下代码添加行：

 $('#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属性和列名称。

问题

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

enter image description here

来源

2013-02-20 birdy

安迪的回答是更清洁，你可能要做到这一点，而修改其中的元素。但是，如果不是“复制但不同”和更多“复制某些部分的新行”的情况，this fork might help。

该技术此处涉及（“在#Row1头不在.space”此处指定在表中选择#Row1 th:not(.space)，即）创建一个新的行，则通过每个所期望的表头的迭代与jQuery's each method，使用jQuery's trim以获得其内部文本没有多余的空白（换行符，缩进），然后附加一个新的单元格和输入与该值作为名称为每个。

来源

2013-02-20 17:06:14 Barney

你应该看看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>

这是给你的name，id和value每个元素的（如果需要）做appendTo之前修改。你也可以使用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 
}

来源

2013-02-20 16:56:20

使用jQuery将行和列添加到HTML表格

回答

相关问题