JQuery method to dynamically add and delete table rows_jquery

The example in this article describes the method of dynamically adding and deleting table rows with JQuery. Share it with everyone for your reference. The specific analysis is as follows:

Yesterday I was doing dynamic addition and deletion of table rows on the page. After reading countless introductions, I discovered a good thing, JQuery. It is really convenient to implement it. This is one of the ways I use our platform.

Copy code The code is as follows:

//Record the number of lines added
var areaCount=1;
//Record the actual number of table rows
var rowCount=1;
//Delete template html
var delRowTemplete = "delete";
//Table row template
var addRowTemplete= "";
$(function(){
//First take out the template that needs to be cloned. The template rowid is rowTemplete_0
addRowTemplete= $("#rowTemplete_0").html();
});
//Add row
function addBatchRow(type){
var templete = $("");
//Increment the serial number and replace [0], _0 or (0) in tr or td to prevent the same ID. This design is mainly for the convenience of background value
templete = templete.append(addRowTemplete.replace(/[0]/g,"[" areaCount "]").replace(/_0/g,"_" areaCount).
replace("processStat("0")","processStat(" areaCount ")"));
//Find the last existing line and splice a line after it
var flag = false;
for(var i=areaCount-1;i>=0;i--){
if($("#rowTemplete_" i).length>0){ $("#rowTemplete_" i).after(templete.append(delRowTemplete));
break;}
}
//Count plus one
areaCount ; rowCount ;
}
//delete row
function deleteBatchRow(obj){
if(rowCount>1) {
$(obj).parents("tr").remove();
rowCount--;
} else alert("Keep at least one row");//If all are deleted, then there will be no way to add more rows, and the template row will also be deleted
}
//Get the number of items
function getAreaCount(){
return rowCount;
}

It is also relatively easy to use in the background. It is very convenient to define array variables in FormBean to get and set.

I hope this article will be helpful to everyone’s jQuery programming.