DOM объект клонер Javascript виджет

Question

Может ли кто-нибудь предложить мне виджет, который может взять существующий объект DOM (например, строку таблицы) и клонировать его / добавить его в DOM после существующего исходного объекта, а также разрешить удалить его или добавить другие.

Чтобы лучше объяснить, что я хочу, вот пример.

Допустим, у меня есть таблица с одной начальной строкой (содержит несколько пустых полей).Виджет добавил бы кнопку сбоку строки, которая позволила бы добавить новую строку (удваивая исходную строку с пустыми полями) или более, а также добавила бы кнопку удаления рядом с добавленными строками для удаления клонированногострок, кроме исходной (первая строка).

Я нашел виджет jQuery, который выполняет что-то вроде этого, под названием Multi Field Extender, но у меня есть ряд проблем с ним в Internet Explorer, который отключает виджет.Я пытался гуглить, но не нашел альтернативы.Заранее спасибо!

Answer 1

Начиная примерно так:

​<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();
});

Вы можете увидеть быстрое демо здесь . Это зависит только от наличия кнопки добавления, все, что находится в строке, будет скопировано, включая текущие значения во входах (и любые обработчики событий и т. Д.). Если вам нужно вручную добавить кнопку Add, просто добавьте ее в document.ready, чтобы создать ее:

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

Answer 2

Предполагая, что ваш 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);
});

Примечание: не проверено, но звучит идея.