Строка таблицы jQuery Clone

У меня есть таблица с кнопкой «Добавить» в конце. Когда вы нажимаете эту кнопку, я хочу создать новую строку таблицы под текущей. Я также хочу, чтобы поля ввода в этой строке были пустыми. Я пытаюсь сделать это с помощью .clone (), но он клонирует все строки на странице. Пожалуйста помоги. благодаря

скрипт

$("input.tr_clone_add") .live('click', function(){ $(this).closest('.tr_clone') .clone() .insertAfter(".tr_clone") });

HTML

   Name  Location  From  To  Add

Name	Location	From	To	Add

Ваша проблема в том, что ваш insertAfter :

 .insertAfter(".tr_clone")

вставляет после каждого .tr_clone :

согласованный набор элементов будет вставлен после элемента (ов), заданного этим параметром.

Вероятно, вы просто захотите использовать его в строке, которую вы дублируете. И немного .find(':text').val('') очистит клонированные текстовые входы; что-то вроде этого:

 var $tr = $(this).closest('.tr_clone'); var $clone = $tr.clone(); $clone.find(':text').val(''); $tr.after($clone);

Демо: http://jsfiddle.net/ambiguous/LAECx/

Я не уверен, какой вход должен быть в фокусе, поэтому я оставил это в покое.

Ну вот:

 $( table ).delegate( '.tr_clone_add', 'click', function () { var thisRow = $( this ).closest( 'tr' )[0]; $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' ); });

Демо-версия: http://jsfiddle.net/RhjxK/4/

Обновление: новый способ делегирования событий в jQuery

 $(table).on('click', '.tr_clone_add', function () { … });

Попробуйте этот вариант:

 $(".tr_clone_add").live('click', CloneRow); function CloneRow() { $(this).closest('.tr_clone').clone().insertAfter(".tr_clone:last"); }

Код ниже будет клонировать последнюю строку и добавлять после последней строки в таблице:

 var $tableBody = $('#tbl').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trLast.after($trNew);

Рабочий пример: http://jsfiddle.net/kQpfE/2/

Попробуй это.

HTML

     Name  Location  From  To  Add

скрипт

 $("input.tr_clone_add").live('click', function(){ var new_row = $("#new-row-model tbody").clone(); $("#table-data tbody").append(new_row.html()); });

Попробуйте этот код, я использовал следующий код для клонирования и удаления клонированного элемента, я также использовал новый class ( newClass ), который можно добавить автоматически с недавно клонированным html

для клонирования ..

  $(".tr_clone_add").live('click', function() { var $tr = $(this).closest('.tr_clone'); var newClass='newClass'; var $clone = $tr.clone().addClass(newClass); $clone.find(':text').val(''); $tr.after($clone); });

для удаления элемента клона.

 $(".tr_clone_remove").live('click', function() { //Once remove button is clicked $(".newClass:last").remove(); //Remove field html x--; //Decrement field counter });

html является следующим: