DOM對象cloner Javascript小部件

Question

有人可能會建議我使用現有DOM對象（如表格行）並將其克隆/將其添加到DOM之後的現有原始對象，也允許刪除它或添加其他人。

爲了更好地解釋我自己想要的是一個例子。

可以說我有一個表有一個初始行（包含一些空字段）。小部件會在行的一側添加一個按鈕，以允許添加一個新行（通過將空行增加一倍）或者更多，並且它會在添加的行旁邊添加一個刪除按鈕以刪除克隆除原始行之外的行（第一行）。

我發現了一個類似於這個叫做Multi Field Extender的jQuery小部件，但是我在Internet Explorer上遇到了一些問題，它禁用了這個小部件。我試圖谷歌它，但我沒有找到任何替代它。先謝謝你！

Answer 1

假設你的HTML是這樣的：

<tr> 
    <td> 
    <input type = "submit" class = "grow" value = "Add another row" /> 
    </td> 
</tr> 

你jQuery來添加一個新行可能是：

$("input.grow").live('click',function(){ 
    var $row = $(this).closest('tr'); 
    $row.clone(true).insertAfter($row); 
}); 

注：未經檢驗的，但這個想法的聲音。

Answer 2

的是這樣開始：

​<table> 
    <tr> 
    <td><input type="text" /></td> 
    <td><input type="checkbox" /></td> 
    <td><input type="button" class="addRow" value="Add" /></td> 
    </tr> 
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

這個jQuery將用於添加/刪除工作：

​$(​​​'table').delegate('​​​.addRow', 'click', function() { 
    var r= $(this).closest('tr').clone(true); 
    if(r.find('.removeRow').length === 0) 
    r.append('<td><input type="button" class="removeRow" value="Remove" /></td>'); 
    r.insertAfter($(this).closest('tr')); 
}).delegate('.removeRow', 'click', function() { 
    $(this).closest('tr').remove(); 
}); 

You can see a quick demo here。這隻取決於添加按鈕的存在，無論在行中的任何內容都將被複制，包括輸入中的當前值（以及任何事件處理程序等）。如果您需要手動添加Add按鈕，然後只需添加這上的document.ready來創建它：

$('table tr:first-child') 
    .append('<td><input type="button" class="addRow" value="Add" /></td>'); 
​