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

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

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

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

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


javascript widget jquery jquery-ui
person crazybyte    schedule 31.03.2010    source источник
comment
Думаю, лучше сделать своими руками. Просто скопируйте html в переменную Javascript и выполните newrow='<tr>..</tr>' и <a onclick='$("this").closest("tr").after(newrow)'>.   -  person bradlis7    schedule 31.03.2010

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person Quasipickle    schedule 31.03.2010

arrow_upward
1
arrow_downward

Начиная с чего-то вроде этого:

​<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>');
​
person Nick Craver    schedule 31.03.2010
comment
Это аккуратно. Он также дублирует значения, которых, я думаю, он пытался избежать. Вероятно, есть способ удалить все значения, добавив около 70 символов в конец кода. - person bradlis7; 31.03.2010
comment
Я не пытался написать виджет сам из-за нехватки времени (думал, что это будет большая проблема, чем он есть), но теперь я думаю, что сделаю именно это, что касается значений (которые дублируются с помощью row) решение довольно простое. Я могу перебрать все элементы ввода и очистить их перед добавлением строки после существующих. - person crazybyte; 31.03.2010