jQuery Riga della tabella dei cloni

Ho una tabella con un pulsante Aggiungi alla fine. Quando fai clic su questo pulsante voglio creare una nuova riga di tabella sotto quella corrente. Voglio anche che i campi di input su questa riga siano vuoti. Sto cercando di farlo usando .clone () ma clona tutte le righe sulla pagina. Per favore aiuto. Grazie

copione

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

HTML

 
Name Location From To Add

Il tuo problema è che il tuo insertAfter :

 .insertAfter(".tr_clone") 

inserisce dopo ogni .tr_clone :

il set di elementi con corrispondenza verrà inserito dopo gli elementi specificati da questo parametro.

Probabilmente vuoi solo usarlo after la fila che stai duplicando. E un po ‘ .find(':text').val('') cancella gli input del testo clonato; qualcosa come questo:

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

Demo: http://jsfiddle.net/ambiguous/LAECx/

Non sono sicuro di quale input debba essere messo a fuoco, quindi l’ho lasciato da solo.

Ecco qui:

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

Demo dal vivo: http://jsfiddle.net/RhjxK/4/


Aggiornamento: il nuovo modo di debind eventi in jQuery è

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

Prova questa variante:

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

Il codice seguente clonerà l’ultima riga e aggiungerà dopo l’ultima riga nella tabella:

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

Esempio di lavoro: http://jsfiddle.net/kQpfE/2/

Prova questo.

HTML

  
Name Location From To Add

copione

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

Prova questo codice, ho usato il seguente codice per clonare e rimuovere l’elemento clonato, ho anche usato una nuova class ( newClass ) che può essere aggiunta automaticamente con l’html appena clonato

per la clonazione ..

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

per rimuovere l’elemento clone.

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

html è come segue