使用jQuery克隆多個錶行

Question

我想擁有一個包含字段表和一些我希望用戶能夠複製的字段的表單。設想一個有一些頭字段（例如發票日期，客戶名稱等）的發票，然後有多個明細行（即產品，數量，價格），其中可能有任何數量的，最後是一些頁腳字段（即稅，Total等）。我想最初顯示一個細節行的形式，並讓用戶點擊一個按鈕來添加更多細節行，我想用jQuery來做到這一點。

我發現了多個示例，顯示如何克隆單個表格行，但我希望做出更靈活的內容;我希望能夠指定幾個表格行，並在單擊按鈕時克隆它們。

到目前爲止，我已經得到了下面的代碼：

<form action="" method="post"> 
    <table border="0" align="center" cellpadding="2" cellspacing="1" id="invoice"> 
    <tr> 
     <td>Name:</td> 
     <td><input name="name" type="text" id="name" size="50" maxlength="100"></td> 
    </tr> 
    <tbody class="multi"> 
     <tr> 
     <td>Product:</td> 
     <td><input name="product[]" type="text" size="50" maxlength="50"></td> 
     </tr> 
     <tr> 
     <td>Qty:</td> 
     <td><input name="qty[]" type="text" size="5" maxlength="5"></td> 
     </tr> 
     <tr> 
     <td>Price:</td> 
     <td><input name="price[]" type="text" size="10" maxlength="10"></td> 
     </tr> 
    </tbody> 
    <tr> 
     <td>Tax:</td> 
     <td><input name="tax" type="text" id="tax" size="10" maxlength="10"></td> 
    </tr> 
     <td>&nbsp;</td> 
     <td><input type="button" id="addline" value="Add Another Line"> 
     <input name="Submit" type="submit" value="Submit Invoice"></td> 
    </tr> 
    </table> 
</form> 

此HTML已經短路了這個例子，但你會看到，我指定要通過把它們放在一個TBODY被克隆錶行與一類「多」。我將使用PHP來處理提交的表單，因此[]將在要複製的字段的末尾（這將使用PHP的數組處理功能）。在要複製的行的上下可以有任意數量的錶行，但爲了簡潔起見，我只示出了一行。

然後我有一些JavaScript，看起來像這樣：

$(document).ready(function($) { 
    $('#addline').click(function() { 
    $('#invoice > tbody.multi').clone().insertAfter('#invoice > tbody.multi'); 
    }); 
}); 

這是爲了選擇，我想重複的行的整個塊，然後克隆它和重複塊後，立即將其插入。

這可行，但我遇到的問題是，單擊「添加行」按鈕後，最終會出現兩個tbody塊，都是「multi」類。所以第二次點擊Add Line按鈕時，我得到了兩個克隆的tbody塊，最後是四個tbody！

解決此問題的最佳方法是什麼？我是否應該嘗試更改新複製的tbody的類，以便將來不會包含在重複中？或者有更好的方法來處理這個問題嗎？

請記住，我希望能夠一次複製多個表格行，而不是像我在很多示例中看​​到的那樣只複製一行。另外我在一些例子中已經看到它們包含了所有的表格，並且在jQuery代碼中包含了要複製的HTML，這看起來像是一種凌亂的方式來爲我做事。最後，清除任何重複字段的值並能夠刪除重複的塊是很好的。

Answer 1

如果你想多<tbody>秒（這是罰款，並保持很好地組織了HTML），那麼就混在:last克隆時選擇只有最後tbody.multi，再次追加在最後的克隆：

$('#addline').click(function() { 
    $('#invoice > tbody.multi:last').clone().insertAfter('#invoice > tbody.multi:last'); 
});​ 

然後你可以用一個簡單的通話val清除克隆輸入：

$('#addline').click(function() { 
    var clone = $('#invoice > tbody.multi:last').clone(); 
    clone.find('input').val(''); 
    clone.insertAfter('#invoice > tbody.multi:last'); 
}); 

演示：http://jsfiddle.net/aeYED/1/