example - jquery clone append

jQuery Clone fila de la tabla

Question

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

<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

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 () { … });

Answer 2

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/

Answer 3

Prueba esta variación:

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

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

Answer 4

Prueba 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 5

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.

Answer 6

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

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