JQuery-Methode zum dynamischen Hinzufügen und Löschen von Tabellenzeilen_jquery

Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Hinzufügen und Löschen von Tabellenzeilen mit JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Gestern habe ich das dynamische Hinzufügen und Löschen von Tabellenzeilen auf der Seite durchgeführt. Nachdem ich unzählige Einführungen gelesen hatte, entdeckte ich eine gute Sache: JQuery. Es ist wirklich bequem, es zu implementieren. Dies ist eine der Möglichkeiten, wie ich unsere Plattform nutze.

Code kopieren Der Code lautet wie folgt:

//Notieren Sie die Anzahl der hinzugefügten Zeilen
var areaCount=1;
//Zeichnen Sie die tatsächliche Anzahl der Tabellenzeilen auf
var rowCount=1;
//Template-HTML löschen
var delRowTemplete = "delete"; 🎜> //Tabellenzeilenvorlage
var addRowTemplete= "";
$(function(){
//Nehmen Sie zuerst die Vorlage heraus, die geklont werden muss. Die Vorlagenzeileid ist rowTemplete_0
addRowTemplete= $("#rowTemplete_0").html();
});
//Zeile
hinzufügen Funktion addBatchRow(type){
var template = $("");
//Erhöhen Sie die Seriennummer und ersetzen Sie [0], _0 oder (0) in tr oder td, um dieselbe ID zu verhindern. Dieses Design dient hauptsächlich der Bequemlichkeit des Hintergrundwerts
Templete = Templete.append(addRowTemplete.replace(/[0]/g,"[" AreaCount "]").replace(/_0/g,"_" AreaCount).
replace("processStat("0")","processStat(" areaCount ")"));
//Finde die letzte vorhandene Zeile und füge eine Zeile danach zusammen
var flag = false;
for(var i=areaCount-1;i>=0;i--){
if($("#rowTemplete_" i).length>0){ $("#rowTemplete_" i).after(templete.append(delRowTemplete));
Pause;}
}
//Zähle plus eins
areaCount ; rowCount ;
}
//Zeile löschen
Funktion deleteBatchRow(obj){
if(rowCount>1) {
$(obj).parents("tr").remove();
rowCount--;
} else warning("Behalten Sie mindestens eine Zeile bei");//Wenn alle gelöscht werden, gibt es keine Möglichkeit, weitere Zeilen hinzuzufügen, und die Vorlagenzeile wird ebenfalls gelöscht
}
//Ermitteln Sie die Anzahl der Elemente
Funktion getAreaCount(){
return rowCount;
}

Es ist auch relativ einfach im Hintergrund zu verwenden. Es ist sehr praktisch, Array-Variablen in FormBean zu definieren, um sie abzurufen und festzulegen.
Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.