[英]Adding rows and columns to an HTML table using jQuery
我正在使用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
属性。
题
我如何以这种方式添加新行,使其真正具有动态性,并且不对行的内容进行硬编码。 它应该用复选框填充所有列,并根据columnheader命名它们。
您应该查看JQuery的Clone函数 。 您可以克隆最后一行或第一行,而无需实际对要添加的元素进行硬编码。 这将复制所有元素,包括新列。
<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
}
Andy的答案更干净,您可能需要在修改其中的元素时做到这一点。 但是,如果不是“复制但不同”的情况,而更多的是“复制具有某些部分的新行”,则此fork可能会有帮助 。
这里的技术涉及创建一个新行,然后使用jQuery的each方法 (在此指定以在表中选择#Row1 th:not(.space)
遍历每个所需的表头,即“ #Row1
中的头#Row1
”。 t .space
“),使用jQuery的修剪使其内部文本没有多余的空格(换行符,缩进),然后附加一个新单元格并以该值作为每个输入的名称。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.