Verwenden Sie JQuery schnell, um Tabellenzeilen zu klonen und Inhaltscode -Snippets zu löschen:
var clonedRow = $('tbody tr:first').clone(); clonedRow.find('input').val(''); $(this).prev().find('table tbody').append(clonedRow);
Klonentabellenreihen mit JQuery sind sehr einfach. Sie können die Methode clone()
zum Kopieren von Zeilen verwenden. Hier ist ein grundlegendes Beispiel:
$("#tableID tbody").append($("#tableID tbody tr:last").clone());
Dieses Beispiel klingt in die letzte Zeile der Tabelle mit "tableId" und fügt sie dem Tabellenkörper hinzu.
können Zeilen geklont werden und ihr Inhalt wird gelöscht. Nach dem Klonen der Zeile können Sie die Methode find()
verwenden, um das untergeordnete Element auszuwählen und dann seinen Inhalt zu löschen. Hier ist ein Beispiel:
var clonedRow = $("#tableID tbody tr:last").clone(); clonedRow.find("input").val(""); $("#tableID tbody").append(clonedRow);
Dieses Beispiel löscht die Eingangsfelder in der geklonten Zeile, bevor die geklonte Zeile zum Körper der Tabelle hinzugefügt wird.
Die klonierte Zeilen -ID kann mit der attr()
-Methode geändert werden. Hier ist ein Beispiel:
var clonedRow = $("#tableID tbody tr:last").clone(); clonedRow.attr("id", "newID"); $("#tableID tbody").append(clonedRow);
Dieses Beispiel ändert die klonierte Zeile in "Newid", bevor die klonierte Zeile in den Körper der Tabelle hinzugefügt wird.
Können Sie eine Tabellenzeile klonen und zu einer anderen Tabelle hinzufügen? Wählen Sie einfach eine andere Tabelle aus, wenn Sie die Klonzeile anhängen. Hier ist ein Beispiel:
var clonedRow = $("#tableID1 tbody tr:last").clone(); $("#tableID2 tbody").append(clonedRow);
Dieses Beispiel klingt in der letzten Zeile der Tabelle mit ID "TableId1" und fügt sie mit ID "TableId2" zur Tabelle hinzu.
Sie können die Methoden text()
oder html()
verwenden, um den Inhalt der Klonlinie zu ändern. Hier ist ein Beispiel:
var clonedRow = $("#tableID tbody tr:last").clone(); clonedRow.find("td:first").text("新内容"); $("#tableID tbody").append(clonedRow);
Dieses Beispiel ändert den Inhalt der ersten Zelle in der klonierten Zeile in "neue Inhalte", bevor die geklonte Zeile zum Körper der Tabelle hinzugefügt wird.
Können Sie eine Tabellenzeile klonen und einige dieser Zellen löschen? Die ausgewählte Zelle kann mit der remove()
-Methode gelöscht werden. Hier ist ein Beispiel:
var clonedRow = $("#tableID tbody tr:last").clone(); clonedRow.find("td:last").remove(); $("#tableID tbody").append(clonedRow);
Dieses Beispiel löscht die letzte Zelle in der geklonten Zeile, bevor die geklonte Zeile zum Körper der Tabelle hinzugefügt wird.
Sie können mit der Methode append()
neue Zellen zur klonierten Zeile hinzufügen. Hier ist ein Beispiel:
var clonedRow = $("#tableID tbody tr:last").clone(); clonedRow.append("<td>新单元格</td>"); $("#tableID tbody").append(clonedRow);
Dieses Beispiel fügt der geklonten Zeile eine neue Zelle mit dem Inhalt der "neuen Zelle" hinzu, bevor die geklonte Zeile zum Körper der Tabelle hinzugefügt wird.
Sie können die Methoden addClass()
oder removeClass()
verwenden, um die Klasse der geklonten Zeile zu ändern. Hier ist ein Beispiel:
var clonedRow = $("#tableID tbody tr:last").clone(); clonedRow.removeClass("旧类").addClass("新类"); $("#tableID tbody").append(clonedRow);
Dieses Beispiel entfernt die Klasse "Old Class" aus der klonierten Zeile und fügt die Klasse "New Class" hinzu, bevor Sie die klonierte Zeile in den Körper der Tabelle hinzufügen.
Sie können die css()
-Methode verwenden, um den Stil der geklonten Zeile zu ändern. Hier ist ein Beispiel:
var clonedRow = $('tbody tr:first').clone(); clonedRow.find('input').val(''); $(this).prev().find('table tbody').append(clonedRow);
Dieses Beispiel ändert die Hintergrundfarbe der geklonten Zeile in Gelb, bevor die klonierte Zeile zum Körper der Tabelle hinzugefügt wird.
Sie können mit der Methode on()
Ereignishandler zu klonierten Linien hinzufügen. Hier ist ein Beispiel:
$("#tableID tbody").append($("#tableID tbody tr:last").clone());
Dieses Beispiel fügt der geklonten Zeile einen Klick -Ereignis -Handler hinzu, bevor die klonierte Zeile zum Körper der Tabelle hinzugefügt wird. Wenn eine Klonzeile geklickt wird, wird ein Warnfeld mit der Meldung "Klonzeile klickt!"
Das obige ist der detaillierte Inhalt vonJQuery Klontischreihe und leer machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!