jQuery Fila de la tabla clon

Question

Tengo una tabla con un botón Agregar en el extremo. 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

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
<tr> 
<td>Name</td> 
<td>Location</td> 
<td>From</td> 
<td>To</td> 
<td>Add</td> 
</tr> 
<tr class="tr_clone"> 
<td><input type="text" autofocus placeholder="who" name="who" ></td> 
<td><input type="text" autofocus placeholder="location" name="location" ></td> 
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
</tr> 
</table><!-- /table#table-data --> 

Answer 1

Su problema es que sus 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 desee utilizar after en la fila que está duplicando. Y un pequeño .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 debe terminar con el enfoque por lo que he dejado solo.

Answer 2

Aquí van:

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

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

---

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

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

Answer 3

probar este v ariación:

$(".tr_clone_add").live('click', CloneRow); 

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

Answer 4

El código siguiente clonará última fila y añadir después de la última fila de 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/

Answer 5

probar esto.

HTML

<!-- Your table --> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Location</th> 
      <th>From</th> 
      <th>To</th> 
      <th>Add</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="text" autofocus placeholder="who" name="who" ></td> 
      <td><input type="text" autofocus placeholder="location" name="location" ></td> 
      <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
      <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
      <td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
     </tr> 
    <tbody> 
</table> 

<!-- Model of new row --> 
<table id="new-row-model" style="display: none"> 
    <tbody> 
     <tr> 
      <td><input type="text" autofocus placeholder="who" name="who" ></td> 
      <td><input type="text" autofocus placeholder="location" name="location" ></td> 
      <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
      <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
      <td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
     </tr> 
    <tbody> 
</table> 

Guión

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

Answer 6

probar este código, He utilizado el siguiente código para la clonación y la eliminación del elemento clonado, también he utilizado nueva clase (newClass) que se puede agregar automáticamente con t que recién clonado html

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 tan followinng

<tr class="tr_clone"> 
         <!-- <td>1</td>--> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span10" readonly> 
         <span><a href="javascript:void(0);" class="tr_clone_add" title="Add field"><span><i class="icon-plus-sign"></i></span></a> <a href="javascript:void(0);" class="tr_clone_remove" title="Remove field"><span style="color: #D63939;"><i class="icon-remove-sign"></i></span></a> </span> </td> </tr>