jquery 全选、反选、各行换色、单击行选中事件
jquery 全选、反选、各行换色、单击行选中事件
css样式
View Code 
1 <style type="text/css">
2 table{ border-collapse:collapse;}
3 td{ border:1px solid #D1EEEE;}
4 .tr_odd{ background-color:#B0E0E6;}
5 .tr_even{ background-color:#EEE5DE;}
6 </style>
2 table{ border-collapse:collapse;}
3 td{ border:1px solid #D1EEEE;}
4 .tr_odd{ background-color:#B0E0E6;}
5 .tr_even{ background-color:#EEE5DE;}
6 </style>
实现代码：
View Code 1 <script language="javascript">
2 $(document).ready(function(){
3 //各行换色
4 $('table tr:odd').addClass('tr_odd'); //奇数行
5 $('table tr:even').addClass('tr_even'); //偶数行
6 //单击行选中是事件
7 $("tr").bind("click",function(){
8 if( $(this).hasClass('selected') ){
9 $(this).removeClass('selected')
10 .find(":checkbox").attr("checked",false);
11 }else{
12 $(this).addClass('selected')
13 .find(":checkbox").attr("checked",true);
14 }
15 })
16 //全选事件
17 $("#selectAll").click(function(){
18 $(":checkbox").attr("checked","checked");
19 });
20 //反选事件
21 $("#unSelect").click(function(){
22 var checkbox=$(":checkbox");
23 for(var i=0;i<checkbox.length;i++){
24 checkbox[i].checked=!checkbox[i].checked;
25 }
26 });
27 //取消事件
28 $("#cancelSelect").click(function(){
29 $(":checkbox").removeAttr("checked");
30 });
31
32
33 });
2 $(document).ready(function(){
3 //各行换色
4 $('table tr:odd').addClass('tr_odd'); //奇数行
5 $('table tr:even').addClass('tr_even'); //偶数行
6 //单击行选中是事件
7 $("tr").bind("click",function(){
8 if( $(this).hasClass('selected') ){
9 $(this).removeClass('selected')
10 .find(":checkbox").attr("checked",false);
11 }else{
12 $(this).addClass('selected')
13 .find(":checkbox").attr("checked",true);
14 }
15 })
16 //全选事件
17 $("#selectAll").click(function(){
18 $(":checkbox").attr("checked","checked");
19 });
20 //反选事件
21 $("#unSelect").click(function(){
22 var checkbox=$(":checkbox");
23 for(var i=0;i<checkbox.length;i++){
24 checkbox[i].checked=!checkbox[i].checked;
25 }
26 });
27 //取消事件
28 $("#cancelSelect").click(function(){
29 $(":checkbox").removeAttr("checked");
30 });
31
32
33 });
html代码
View Code 1 <body>
2 <input type="button" value="全选" id="selectAll">
3 <input type="button" value="反选" id="unSelect">
4 <input type="button" value="取消" id="cancelSelect">
5 <table width="200" border="1">
6 <tr>
7 <td>cxv</td>
8 <td>zxcv</td>
9 <td>zxcv</td>
10 </tr>
11 <tr>
12 <td><form id="form1" name="form1" method="post" action="">
13 <label>
14 <input type="checkbox" name="checkbox" value="checkbox" />
15 </label>
16 </form> </td>
17 <td>zxcv</td>
18 <td>gfh</td>
19 </tr>
20 <tr>
21 <td><form id="form2" name="form2" method="post" action="">
22 <label>
23 <input type="checkbox" name="checkbox2" value="checkbox" />
24 </label>
25 </form> </td>
26 <td>fhg</td>
27 <td>ghj</td>
28 </tr>
29 <tr>
30 <td><form id="form3" name="form3" method="post" action="">
31 <label>
32 <input type="checkbox" name="checkbox3" value="checkbox" />
33 </label>
34 </form> </td>
35 <td>dfg</td>
36 <td>fgh</td>
37 </tr>
38 </table>
39 </body>
40 </html>
2 <input type="button" value="全选" id="selectAll">
3 <input type="button" value="反选" id="unSelect">
4 <input type="button" value="取消" id="cancelSelect">
5 <table width="200" border="1">
6 <tr>
7 <td>cxv</td>
8 <td>zxcv</td>
9 <td>zxcv</td>
10 </tr>
11 <tr>
12 <td><form id="form1" name="form1" method="post" action="">
13 <label>
14 <input type="checkbox" name="checkbox" value="checkbox" />
15 </label>
16 </form> </td>
17 <td>zxcv</td>
18 <td>gfh</td>
19 </tr>
20 <tr>
21 <td><form id="form2" name="form2" method="post" action="">
22 <label>
23 <input type="checkbox" name="checkbox2" value="checkbox" />
24 </label>
25 </form> </td>
26 <td>fhg</td>
27 <td>ghj</td>
28 </tr>
29 <tr>
30 <td><form id="form3" name="form3" method="post" action="">
31 <label>
32 <input type="checkbox" name="checkbox3" value="checkbox" />
33 </label>
34 </form> </td>
35 <td>dfg</td>
36 <td>fgh</td>
37 </tr>
38 </table>
39 </body>
40 </html>
运行结果：
