jquery Implementation Table Select All, reverse Select, delete one or more rows, add a row
Last Update:2018-07-24
Source: Internet
Author: User
<title></title>
<script src= "Jquery1.7.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
Table TR TD
{
Border:solid 1px #eee;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ (' #Checkbox7 '). Click (function () {
if ($ (this). attr ("checked")) {//Select all
$ (' table Input[type=checkbox] '). attr (' checked ', true);
$ (' span '). Text (' Cancel all selection ');
}
else {
$ (' table Input[type=checkbox] '). attr (' checked ', false);
$ (' span '). Text (' Select All ');
}
})
$ ("#Checkbox8"). Click (function () {//Counter-Select
$ (' table Input[type=checkbox] '). each (function () {
$ (this). attr ("Checked",!$ (This). attr ("checked"));
});
});
$ (' #btnDelete '). Click (function () {
$ (' table Input[type=checkbox] '). each (function () {
if ($ (this). attr ("checked")) {
$ (this). Parent (). Parent (). remove ();
}
});
})
$ (' #btnAdd '). Click (function () {
$ (' Table Tr:last '). After ($ (' <tr><td><input type= "checkbox"/></td><td></td> <td></td><td></td><td></td><td></td></tr> '));
$ (' Table Tr:last td:eq (1) '). Text ($ (' #txtClassName '). Val ());
$ (' Table Tr:last td:eq (2) '). Text ($ (' #StuName '). Val ());
$ (' Table Tr:last td:eq (3) '). Text ($ (' #Salary '). Val ());
$ (' Table Tr:last td:eq (4) '). Text ($ (' #txtEmployer '). Val ());
$ (' Table Tr:last td:eq (5) '). Text ($ (' #txtZhuanZheng '). Val ());
})
})
</script>
<body>
<div>
<input id= "Checkbox7" type= "checkbox"/><span> Select all </span><input id= "Checkbox8" type= "checkbox"/ > Anti-selection
<input id= "Btndelete" type= "button" value= "Delete"/>
<input id= "Btnadd" type= "button" value= "Add"/><br/>
Class <input id= "Txtclassname" type= "text"/><br/>
Name <input id= "Stuname" type= "text"/><br/>
Salary <input id= "Salary" type= "text"/><br/>
Working unit <input id= "Txtemployer" type= "text"/><br/>
Whether positive <input id= "Txtzhuanzheng" type= "text"/></div>
<table>
<tr>
<td>
Operation
</td>
<td>
Class
</td>
<td>
Name
</td>
<td>
Salary
</td>
<td>
Work unit
</td>
<td>
Whether to be positive
</td>
</tr>
<tr>
<td>
<input id= "Checkbox1" type= "checkbox"/>
</td>
<td>
001
</td>
<td>
Zhang Yi
</td>
<td>
4000</td>
<td>
Soes
</td>
<td>
Is </td>
</tr>
<tr>
<td>
<input id= "Checkbox2" type= "checkbox"/>
</td>
<td>
002
</td>
<td>
Zhang Yi </td>
<td>
4000
</td>
<td>
Soes
</td>
<td>
Whether
</td>
</tr>
<tr>
<td>
<input id= "Checkbox3" type= "checkbox"/>
</td>
<td>
003
</td>
<td>
Zhang San </td>
<td>
4000
</td>
<td>
Soes
</td>
<td>
Is
</td>
</tr>
<tr>
<td>
<input id= "Checkbox4" type= "checkbox"/>
</td>
<td>
004
</td>
<td>
Zhang Xi
</td>
<td>
4000
</td>
<td>
Soes
</td>
<td>
Whether
</td>
</tr>
<tr>
<td>
<input id= "Checkbox5" type= "checkbox"/>
</td>
<td>
005
</td>
<td>
Steven Cheung
</td>
<td>
4000
</td>
<td>
Soes
</td>
<td>
Is
</td>
</tr>
<tr>
<td>
<input id= "Checkbox6" type= "checkbox"/>
</td>
<td>
006
</td>
<td>
Zhang Liu
</td>
<td>
4000
</td>
<td>
Soes
</td>
<td>
Whether
</td>
</tr>
</table>
</body>