Klonen mehrerer Tabellenzeilen mit jQuery

Question

Ich möchte ein Formular haben, das eine Tabelle von Feldern enthält und einige der Felder möchte ich vom Benutzer duplizieren lassen. Stellen Sie sich eine Rechnung vor, die einige Kopffelder enthält (z.B. Rechnungsdatum, Kundenname, etc.) und dann gibt es mehrere Detailzeilen (z.B. Produkt, Menge, Preis), von denen es beliebig viele geben kann, und schließlich einige Fußzeilenfelder (z.B. Steuer, Gesamtsumme, etc.). Ich möchte das Formular zunächst mit einer Detailzeile anzeigen und es dem Benutzer ermöglichen, auf eine Schaltfläche zu klicken, um weitere Detailzeilen hinzuzufügen, und ich möchte dies mit jQuery tun.

Ich habe mehrere Beispiele gefunden, die zeigen, wie man eine einzelne Tabellenzeile klonen kann, aber ich möchte etwas machen, das flexibler ist; Ich möchte mehrere Tabellenzeilen spezifizieren können und sie klonen lassen, wenn eine Schaltfläche geklickt wird.

Bisher habe ich folgenden Code:

      Name:

        Produkt:

        Menge:

        Preis:

      Steuer:

       

Dieses HTML wurde für dieses Beispiel gekürzt, aber Sie werden sehen, dass ich die Tabellenzeilen angebe, die geklont werden sollen, indem ich sie in einem tbody mit der Klasse "multi" platziere. Ich werde PHP verwenden, um das eingereichte Formular zu bearbeiten, daher die [] am Ende der Felder, die dupliziert werden sollen (dies wird die Array-Funktionen von PHP nutzen). Es können beliebig viele Tabellenzeilen über und unter den zu duplizierenden Zeilen vorhanden sein, aber ich habe aus Gründen der Kürze nur eine gezeigt.

Dann habe ich JavaScript, das ungefähr so aussieht:

$(document).ready(function($) {
  $('#addline').click(function() {
    $('#invoice > tbody.multi').clone().insertAfter('#invoice > tbody.multi');
  });
});

Dies soll den gesamten Block von Zeilen auswählen, den ich duplizieren möchte, ihn klonen und ihn unmittelbar nach dem duplizierten Block einfügen.

Dies funktioniert, aber das Problem, das ich habe, ist, dass nach dem Klicken auf die Schaltfläche "Zeile hinzufügen" zwei tbody-Blöcke entstehen, beide mit der Klasse "multi". Beim zweiten Klicken auf die Schaltfläche "Zeile hinzufügen" werden also beide tbody-Blöcke geklont und es entstehen vier tbody's!

Was ist der beste Weg, um dies zu beheben? Soll ich versuchen, die Klasse des neu duplizierten tbody zu ändern, damit es in Zukunft nicht mehr dupliziert wird? Oder gibt es einen besseren Weg, um dies komplett zu handhaben?

Denken Sie daran, ich möchte in der Lage sein, mehrere Tabellenzeilen auf einmal zu duplizieren, nicht nur eine Zeile, wie ich es in vielen Beispielen gesehen habe. Außerdem habe ich in einigen Beispielen gesehen, dass sie den gesamten Tabellen- und Formular-HTML-Code, der dupliziert werden soll, direkt im jQuery-Code einbeziehen, was mir wie eine unordentliche Methode erscheint. Und schließlich wäre es schön, die Werte der duplizierten Felder zu löschen und duplizierte Blöcke löschen zu können.

Answer 1

Wenn Sie mehrere s möchten (was in Ordnung ist und den HTML-Code schön organisiert), dann mischen Sie einfach :last ein, um nur das letzte tbody.multi beim Klonen auszuwählen und wieder einzufügen:

$('#addline').click(function() {
    $('#invoice > tbody.multi:last').clone().insertAfter('#invoice > tbody.multi:last');
});

Dann können Sie die geklonten Eingaben mit einem einfachen val-Aufruf löschen:

$('#addline').click(function() {
    var clone = $('#invoice > tbody.multi:last').clone();
    clone.find('input').val('');
    clone.insertAfter('#invoice > tbody.multi:last');
});

Demo: http://jsfiddle.net/aeYED/1/