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.
//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 Vorlagenzeile
id 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.