The specific implementation code is as follows:
The HTML for the table is as follows:
| The code is as follows |
Copy Code |
<input type= "button" value= "Add Row"/>
<table>
<tr><td><input type= "button" class = "del" value= "delete the line"/></td></tr>
</table> |
The jquery code for adding rows is as follows:
| The code is as follows |
Copy Code |
$ (function () {
$ ("tr"). After ("<tr><td><input type= ' button ' class = ' del ' value= ' delete the line '/></td></tr > ");
}) |
Delete the code as follows:
$ (this). Parents ("tr"). Remove ();
The code above feels unreasonable and incompatible, and we can modify it slightly.
The added code is as follows
| The code is as follows |
Copy Code |
| function AddRow () {
var vtb=$ ("#TbData")//The JQuery object that gets the table Id=tbdata
All data rows have one. Caserow class, get the size of the data row
var vnum=$ ("#TbData tr"). Filter (". Caserow "). Size () +1;//How many rows of data the table has
var vtr=$ ("#TbData #trDataRow1"); Get the first row of data in the table
var vtrclone=vtr.clone (true);//Create the replica object for the first row Vtrclone
Vtrclone[0].id= the "Trdatarow" +vnum;//set the first ID? Palmetto Nasal loop gourmands? ring le odd gui} add multiple IDs?? RDataRow1 data rows;
Vtrclone.appendto (VTB)//Add the Replica Cell object to the table below
} |
The deleted code is as follows
| The code is as follows |
Copy Code |
var vnum=$ ("#TbData tr"). Filter (". Caserow "). Size () +1;//How many rows of data are in the table;
if (vnum<=2)
{
Alert (' Please leave at least one line ');
Return
}
var vbtndel=$ (this);//Get Clicked button Object
The Var vtr=vbtndel.parent ("TD"). Parent ("tr");//Get the parent 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 add, delete, and after deletion, dynamically implemented under the reference
| The code is as follows |
Copy Code |
| <! 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 ($) {
Add rows
$ ("#add1"). Click (function () {
$ ("#table2 >tbody"). Append (' <tr><td> add 1</td><td><button onclick= deltr (this) "> Delete </button></td></tr> ')
});
});
To delete a function of a row, you must put the Domready function outside
function deltr (delbtn) {
$ (DELBTN). Parents ("tr"). Remove ();
};
JQuery (function ($) {
Define Delete button Event bindings
Write inside to prevent pollution global namespaces
function deltr () {
$ (this). Parents ("tr"). Remove ();
};
Delete button is already initialized binding Delete event
$ ("#table2. Del"). Click (deltr);
Add rows
$ ("#add2"). Click (function () {
$ (' <tr><td> new line 2</td><td><button class= ' del ' > Delete </button></td></tr > ')
Here to bind the event again to the Delete button.
. Find (". del"). Click (deltr). End ()
. Appendto ($ ("#table2 >tbody"));
});
}); JQuery (function ($) {
Delete button event bindings for table fourth
$ ("#table2"). Click (function (e) {
if (e.target.classname== "Del") {
$ (e.target). Parents ("tr"). Remove ();
};
});
Add button event bindings for table fourth
$ ("#add3"). Click (function () {
$ ("#table2 >tbody"). Append (' <tr><td> New line 3</td><td><button class= ' del ' > Delete </ Button></td></tr> ')
});
}); </script>
<body>
<br/>
<table id= "Table2" >
<tbody>
<tr>
<td> This line has a </td>
<td><buttonclass= "del" > Delete </button></td>
</tr>
<tr>
<td> This line has a </td>
<td><buttonclass= "del" > Delete </button></td>
</tr>
</tbody>
</table>
<input type= "button" Name= "Add1" id= "Add1" value= "Add 1"/>
<input type= "button" Name= "Add2" id= "ADD2" value= "Add 2"/>
<input type= "button" Name= "Add3" id= "Add3" value= "Add 3"/>
</body>
|
