使用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表格

回答

相關問題