This example describes how jquery dynamically adds and deletes table rows. Share to everyone for your reference. The specific analysis is as follows:
Yesterday do page table row dynamic Add and delete, read countless introduction, found a good dongdong, JQuery. It is really very convenient to implement it, this is a way I use our platform.
Copy Code code as follows:
Record Add row Count
var areacount=1;
Record number of actual table rows
var rowcount=1;
Delete template html
var delrowtemplete = "<td><a href= ' javascript:void (0); ' class= ' Content_del ' onclick= ' (This) ' > Delete </a></td> ";
Table row Template
var addrowtemplete= "";
$ (function () {
First remove the template that needs to be cloned, and the template line <tr>id to Rowtemplete_0
Addrowtemplete= $ ("#rowTemplete_0"). html ();
});
Increase row
function Addbatchrow (type) {
var templete = $ ("<tr id= ' Rowtemplete_" +areacount+ "' ></tr>");
Increment sequence number, replace TR or TD exist [0], _0 or (0) to prevent the same ID, so the design is mainly for the background value of convenience
Templete = Templete.append (Addrowtemplete.replace (/\[0\]/g, "[" +areacount+ "]"). Replace (/_0/g, "_" +areacount).
Replace ("Processstat" ("0\") "," Processstat ("+areacount+")));
Find the last line that exists, and then stitch 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 deleted, then there is no way to add lines, template lines have been deleted AH
}
Get the number of bars
function Getareacount () {
return rowcount;
}
The background is also relatively easy to use, in Formbean inside the definition of array variables to get and set, very convenient.
I hope this article will help you with your jquery programming.
