Клонирование нескольких строк таблицы с использованием jQuery

Question

Я хочу иметь форму, содержащую таблицу полей и некоторые поля, которые я хотел бы, чтобы пользователь мог дублировать. Представьте себе счет-фактуру, в которой есть некоторые поля заголовков (например, дата счета, имя клиента и т. Д.), А затем есть несколько строк подробностей (например, Product, Qty, Price), для которых может быть любое число и, наконец, некоторые поля нижнего колонтитула (т.е. , 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 с классом «multi». Я буду использовать PHP для обработки представленной формы, поэтому [] в конце полей, которые должны быть дублированы (это будет использовать функции обработки массивов PHP). Может быть любое количество строк таблицы выше и ниже строк, которые должны быть дублированы, но я только показал один для краткости.

Я тогда некоторые JavaScript, который выглядит следующим образом:

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

Это означало, чтобы выбрать весь блок строк, которые я хочу дублируется, а затем клонировать его и вставить его сразу же после дублирующего блока.

Это работает, но проблема заключается в том, что после нажатия кнопки «Добавить линию» я заканчиваю двумя блоками твэла, как с классом «multi». Таким образом, во второй раз, когда нажата кнопка «Добавить линию», я получаю клонированные клонированные блоки, и заканчивается четырьмя телами!

Каков наилучший способ исправить это? Должен ли я попытаться изменить класс вновь дублированного тела, чтобы он не включался в будущее дублирование? Или есть лучший способ справиться с этим?

Помните, что я хочу иметь возможность дублировать сразу несколько строк таблицы, а не только одну строку, как я видел во многих примерах. Также я видел в некоторых примерах, что они включают всю таблицу и форму HTML, которая должна быть дублирована в коде jQuery, что кажется неопрятным способом сделать что-то для меня. И, наконец, было бы неплохо очистить значения любых дублированных полей и удалять дублированные блоки.

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/