jQuery Clone-Tabellenzeile

Ich habe eine Tabelle mit einer Schaltfläche Hinzufügen am Ende. Wenn Sie auf diese Schaltfläche möchte ich eine neue Zeile in der Tabelle erstellt werden, die unterhalb der aktuellen ein. Ich will auch, dass die Eingabefelder in dieser Zeile leer zu sein. Ich bin versucht, dies zu tun mit .clone () - aber es Klone alle Zeilen auf der Seite. Bitte helfen Sie. Dank

Skript

$("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 -->
Kommentar zu dem Problem
Ich denke, Sie wollen auch die name - parameter aktualisiert werden, um zu vermeiden, Daten-Konflikte (D. H. die eingegebenen Werte in die neue Zeile überschreiben die Werte des geklonten Zeile)...? Kommentarautor: Tomm
Hallo Tomm, ich glaube nicht, dass name-Werten in Konflikt, ich gehen zu müssen, fügen Sie ein Unterscheidungsmerkmal an einem gewissen Punkt wenn auch vielleicht eine Nummer hinzuzufügen, die auf der tr-Klasse? Kommentarautor: Clinton Green
Normalerweise verwende ich eine "Vorlage" - Klon, der gestaltet ist, um "display: none" via css. Kommentarautor: hafichuk
Ein paar Dinge: (1) die width, border, cellpadding und cellspacing - Attribute sind veraltet, zu Gunsten von CSS-Stilen. Wechseln zu CSS. (2) mit TH statt TD-Elemente für Ihre Tabellenüberschrift Zellen. (3) Sie kann nicht mehr als eine Autofokus-Feld. Kommentarautor: Šime Vidas
@Šime Vidas Dank für die Kommissionierung, bis. Cheers Kommentarautor: Clinton Green

InformationsquelleAutor der Frage Clinton Green | 2011-11-01

  1. 52

    Dein problem ist, dass Ihr insertAfter:

    .insertAfter(".tr_clone")

    fügt nach jedem .tr_clone:

    den aufeinander abgestimmten Satz von Elementen eingefügt werden, nachdem das element(s) von diesem parameter angegeben.

    Werden Sie wahrscheinlich wollen einfach nur zu nutzen nach auf die Zeile, die Sie sind, zu duplizieren. Und ein wenig .find(':text').val('') wird klar, dass die geklonte text ein; so etwas wie dieses:

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

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

    Ich bin mir nicht sicher, welcher Eingang am Ende mit dem Fokus, so dass ich verlassen haben, allein.

    InformationsquelleAutor der Antwort mu is too short

  2. 15

    Hier gehen Sie:

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

    Live-demo: http://jsfiddle.net/RhjxK/4/

    Update: Die neue Art zu delegieren Ereignisse in jQuery ist 

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

    InformationsquelleAutor der Antwort Šime Vidas

  3. 4

    Versuchen Sie diese Variante:

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

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

    InformationsquelleAutor der Antwort Steve Wellens

  4. 4

    Den code unten Klon Letzte Zeile und füge nach der letzten Zeile in der Tabelle:

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

$trLast.after($trNew);

    Beispiel : http://jsfiddle.net/kQpfE/2/

    InformationsquelleAutor der Antwort maverickosama92

  5. 1

    Versuchen.

    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>

    Skript

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

    InformationsquelleAutor der Antwort Taron Hambardzumyan

  6. 0

    Versuchen, diesen code,
    Ich habe folgende code für das Klonen und entfernen das geklonte element, ich habe auch neue Klasse (newClass), die Hinzugefügt werden können, werden automatisch mit der neu geklonten html

    zum Klonen..

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

    für das entfernen der Klon-element.

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

    html ist wie 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>

    InformationsquelleAutor der Antwort Umair Mehmood

Schreibe einen Kommentar