jQuery Clone fila de la tabla

Tengo una mesa con un botón Agregar al final. Cuando hace clic en este botón, quiero que se cree una nueva fila de tabla debajo de la actual. También quiero que los campos de entrada en esta fila estén en blanco. Estoy tratando de hacer esto usando .clone () pero clona todas las filas en la página. Por favor ayuda. Gracias

Guión

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

HTML

 
Name Location From To Add

Su problema es que su insertAfter :

 .insertAfter(".tr_clone") 

insertos después de cada .tr_clone :

el conjunto de elementos coincidentes se insertará después de los elementos especificados por este parámetro.

Probablemente solo quiera usar after en la fila que está duplicando. Y un poco .find(':text').val('') borrará las entradas de texto clonado; algo como esto:

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

Demostración: http://jsfiddle.net/ambiguous/LAECx/

No estoy seguro de qué entrada debería terminar con el foco, así que lo dejé solo.

Aqui tienes:

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

Demostración en vivo: http://jsfiddle.net/RhjxK/4/


Actualización: la nueva forma de delegar eventos en jQuery es

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

Prueba esta variación:

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

El siguiente código clonará la última fila y agregará después de la última fila en la tabla:

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

Ejemplo de trabajo: http://jsfiddle.net/kQpfE/2/

Prueba esto.

HTML

  
Name Location From To Add

Guión

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

Pruebe este código, utilicé el siguiente código para clonar y eliminar el elemento clonado, también he usado una nueva clase ( newClass ) que puede agregarse automáticamente con el html recién clonado.

para la clonación …

  $(".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); }); 

para eliminar el elemento clon

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

html es como sigue