<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
Img
{
Width: 50px; height: 50px;
}
Table
{
Width: 600px; height: 400px;
}
Table tr td {border: solid 1px # eee ;}
</Style>
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Checkbox7'). click (function (){
// Implement the all-selected invert Selection Function
If (this. checked ){
$ ('Table tr td input [type = checkbox] '). attr ('checked', true );
}
Else {$ ('table tr td input [type = checkbox] '). attr ('checked', false );}
})
// Implement the invert Selection Function
$ ('# Checkbox8'). click (function (){
$ ('Table tr td input [type = checkbox] '). each (function (){
This. checked =! This. checked;
})
})
$ ('# Button1'). click (function (){
$ ("Input: checked"). each (function (){
$ (This). parent (). parent (). remove ();
});
})
$ ('# Button2'). click (function (){
$ ('# Tb1 '). append ('<tr> <td> <input type = "checkbox"/> <td>' + Text1.value + '</td> <td>' + Text2.value + '</ td> <td> '+ Text3.value +' </td> <td> '+ Text4.value +' </td> <td> '+ Text5.value +' </td>/ tr> ')
})
})
</Script>
</Head>
<Body>
<Div id = "div1">
<Input id = "Checkbox7" type = "checkbox"/> select <input id = "Checkbox8" type = "checkbox"/> Inverse
<Input id = "Button1" type = "button" value = "delete"/> <input id = "Button2" type = "button" value = "add"/> </ div>
<Table id = "tb1">
<Tr id = "first"> <td> operation </td> <td> class </td> <td> name </td> <td> salary </td> <td> employer </td> <td> whether to turn positive </td> </tr>
<Tr id = "0"> <td> <input id = "Checkbox1" type = "checkbox"/> </td> <td> class 2010 NET </td> <td> peaceful </td> <td> 5000 </td> <td> Beijing Lenovo </td> <td> Yes </td> </tr>
<Tr id = "1"> <td> <input id = "Checkbox2" type = "checkbox"/> </td> <td> class 2010 NET </td> <td> Zhao Si </td> <td> 3000 </td> <td> Beijing Lenovo </td> <td> NO </td> </tr>
<Tr id = "2"> <td> <input id = "Checkbox3" type = "checkbox"/> </td> <td> Java class 2010 </td> <td> Wang Hong </td> <td> 4000 </td> <td> Baidu </td> <td> Yes </td> </tr>
<Tr id = "3"> <td> <input id = "Checkbox4" type = "checkbox"/> </td> <td> PHP class 2010 </td> <td> Wang Wu </td> <td> 3000 </td> <td> Beijing Redstar </td> <td> NO </td> </tr>
<Tr id = "4"> <td> <input id = "Checkbox5" type = "checkbox"/> </td> <td> Class 3G </td> <td> RIS </td> <td> 6000 </td> <td> Google </td> <td> Yes </td> </tr>
</Table>
Name: <input id = "Text1" type = "text"/>
Class: <input id = "Text2" type = "text"/>
Salary: <input id = "Text3" type = "text"/>
Employer: <input id = "Text4" type = "text"/>
Whether to return to the correct position: <input id = "Text5" type = "text"/>
</Body>
</Html>