web-dev-qa-db-fra.com

ligne de la table jQuery Clone

J'ai une table avec un bouton Ajouter à la fin. Lorsque vous cliquez sur ce bouton, je souhaite créer une nouvelle ligne sous la ligne actuelle. Je souhaite également que les champs de saisie de cette ligne soient vides. J'essaye de faire ceci en utilisant .clone () mais cela clone toutes les lignes de la page. S'il vous plaît aider. Merci

Script 

$("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 -->
jqueryclone
35
Clinton Green

Votre problème est que votre insertAfter :

.insertAfter(".tr_clone")

insère après chaque .tr_clone:

l'ensemble d'éléments correspondant sera inséré après le ou les éléments spécifiés par ce paramètre.

Vous voulez probablement simplement utiliser after sur la ligne que vous dupliquez. Et un petit .find(':text').val('') effacera les entrées de texte clonées; quelque chose comme ça:

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

Démo: http://jsfiddle.net/ambiguous/LAECx/

Je ne suis pas sûr de savoir quelle entrée devrait finir avec le focus, donc je l'ai laissée seule.

57
mu is too short

Voici:

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

Démo en direct:http://jsfiddle.net/RhjxK/4/

Update: La nouvelle manière de déléguer des événements dans jQuery est 

$(table).on('click', '.tr_clone_add', function () { … });
15
Šime Vidas

Le code ci-dessous clone la dernière ligne et ajoute après la dernière ligne du tableau:

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

$trLast.after($trNew);

Exemple de travail: http://jsfiddle.net/kQpfE/2/

5
maverickosama92

Essayez cette variante:

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

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

Essaye ça.

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>

Script 

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

Essayez ce code, J'ai utilisé le code suivant pour le clonage et la suppression de l’élément cloné, j’ai également utilisé une nouvelle classe (newClass) qui peut être ajoutée automatiquement avec le nouveau HTML cloné.

pour le clonage .. 

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

pour supprimer l'élément clone. 

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

html est comme suit 

<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>
0
Umair Mehmood