Home > Developer > Web Develop
The specific implementation code is as follows:
The HTML for table is as follows:
Code to copy code as follows
<input type= "button" value= "Add a row"/>
<table>
<tr><td><input type= "button" class = "del" value= "delete this row"/></td></tr>
</table>
The jquery code for adding lines is as follows:
Code to copy code as follows
$ (function () {
$ ("tr"). Last (). After ("<tr><td><input type= ' button ' class = ' del ' value= ' delete the row '/></td></tr > ");
})
The deletion code is as follows:
$ (this). Parents ("tr"). Remove ();
The above code feels unreasonable and incompatible. We can modify it slightly.
The added code is as follows
Code to copy code as follows
function AddRow () {
var vtb=$ ("#TbData");//The JQuery object that gets the table Id=tbdata
All the data rows have one. Caserow class to get the size of the data rows
var vnum=$ ("#TbData tr"). Filter (". Caserow "). Size () +1;//table has how many rows of data
var vtr=$ ("#TbData #trDataRow1"); Get the first row of data in a table
var vtrclone=vtr.clone (true);//Create a Copy object for the first row Vtrclone
Vtrclone[0].id= "Trdatarow" +vnum;//set the first ID? Palmetto Nose, foodies, ring, add multiple IDs?? RDataRow1 data rows; add one at a time;
Vtrclone.appendto (vTb);//Add the Copy Cell object below the table
}
Remove the following code
Code to copy code as follows
var vnum=$ ("#TbData tr"). Filter (". Caserow "). The size () +1;//table has the number of rows of data;
if (vnum<=2)
{
Alert (' Please leave at least one line ');
Return
}
var vbtndel=$ (this);//button object to get clicked
var vtr=vbtndel.parent ("TD"). Parent ("tr");//Get the Father Tr object;
if (vtr.attr ("id") = = = "TrDataRow1")
{
Alert (' first line cannot be deleted! '); The first line is the base of the clone and cannot be deleted
Return
}else{
Vtr.remove ();
}
Below we write a complete line implementation to add, delete, and after deletion, the dynamic implementation under the reference
Code to copy code as follows
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Jquery-1.3.1.js" ></script>
<title>demo about Table</title>
<script>
JQuery (function ($) {
Adding rows
$ ("#add1"). Click (function () {
$ ("#table2 >tbody"). Append (' <tr><td> new 1</td><td><button onclick= "deltr (This)" > Delete </button></td></tr> ')
});
});
The function to delete the row must be placed outside the Domready function
function deltr (delbtn) {
$ (DELBTN). Parents ("tr"). Remove ();
};
JQuery (function ($) {
Define Delete button Event bindings
Write inside to prevent contamination of the global namespace
function deltr () {
$ (this). Parents ("tr"). Remove ();
};
A Delete button has been initialized to initialize the binding delete event
$ ("#table2. Del"). Click (deltr);
Adding rows
$ ("#add2"). Click (function () {
$ (' <tr><td> new line 2</td><td><button class= ' del ' > Delete </button></td></tr > ')
Here the Delete button binds the event again.
. Find (". del"). Click (deltr). End ()
. AppendTo ($ ("#table2 >tbody"));
});
});
JQuery (function ($) {
Delete button event bindings for fourth table
$ ("#table2"). Click (function (e) {
if (e.target.classname== "Del") {
$ (e.target). Parents ("tr"). Remove ();
};
});
Add button event bindings for the fourth table
$ ("#add3"). Click (function () {
$ ("#table2 >tbody"). Append (' <tr><td> new row 3</td><td><button class= ' del ' > Delete </ Button></td></tr> ')
});
});
</script>
<body>
<br/>
<table id= "Table2" >
<tbody>
<tr>
<td> This line turns out to have </td>
<td><buttonclass= "del" > Delete </button></td>
</tr>
<tr>
<td> This line turns out to have </td>
<td><buttonclass= "del" > Delete </button></td>
</tr>
</tbody>
</table>
<input type= "button" Name= "Add1" id= "add1" value= "added 1"/>
<input type= "button" Name= "Add2" id= "ADD2" value= "added 2"/>
<input type= "button" Name= "Add3" id= "add3" value= "added 3"/>
</body>
From:http://www.111cn.net/wy/jquery/46175.htm
jquery Dynamic Add delete and add table row code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
