How to dynamically add and delete table rows using JQuery _ jquery-js tutorial

This article mainly introduces JQuery's method of dynamically adding and deleting table rows. It provides examples of jQuery's techniques for dynamically operating table rows, which has some reference value, for more information about how to dynamically add and delete table rows using JQuery, see the following example. Share it with you for your reference. The specific analysis is as follows:

Yesterday, I added and deleted table rows dynamically on the page. After reading numerous introductions, I found a good thing, JQuery. It is really convenient to implement it. This is a method I use on our platform.

The Code is as follows:

// Record the number of rows added
Var areaCount = 1;
// Record the actual number of rows in the table
Var rowCount = 1;
// Delete the template html
Var delRowTemplete ="Delete";
// Table row Template
Var addRowTemplete = "";
$ (Function (){
// First retrieve the template to be cloned, template lineThe id is rowTemplete_0.
AddRowTemplete = $ ("# rowTemplete_0" ).html ();
});
// Add rows
Function addBatchRow (type ){
Var templete = $ ("");
// Incrementing sequence number. Replace tr or td with [0], _ 0, or (0) to prevent the id from being the same. This design is mainly for the convenience of background values.
Templete = templete. append (addRowTemplete. replace (/\ [0 \]/g, "[" + areaCount + "]"). replace (/_ 0/g, "_" + areaCount ).
Replace ("processStat (\" 0 \ ")", "processStat (" + areaCount + ")"));
// Locate the last row and splice it with a row
Var flag = false;
For (var I = areaCount-1; I> = 0; I --){
If ($ ("# rowTemplete _" + I). length> 0) {$ ("# rowTemplete _" + I). after (templete. append (delRowTemplete ));
Break ;}
}
// Count and add one
AreaCount ++; rowCount ++;
}
// Delete a row
Function deleteBatchRow (obj ){
If (rowCount> 1 ){
$ (Obj). parents ("tr"). remove ();
RowCount --;
} Else alert ("keep at least one row"); // if all the rows are deleted, there is no way to add the rows and the template row is deleted.
}
// Obtain the number of entries
Function getAreaCount (){
Return rowCount;
}

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

I hope this article will help you with jQuery programming.