jquery 实现table隔行变色、复选框的选择变色,分享下,供大家学习参考。
代码如下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table隔行变色、复选框的选择变色-www.jb200.com</title> <style> .even{ background-color:#0FF; } .odd{ background-color:#F9F;} .selected{ background:#CCC; } .selected1{ background-color:#99F; } </style> <script src="/jquery/jquery-1.7.1.js"></script> <script> $(document).ready(function(){ $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); $("input[type=checkbox]").hover(function(){ $(this).parents("tr").toggleClass("selected1"); }); $("input[type=checkbox]").click(function (){ // alert("ddd"); // if($("input[type=checkbox]:checked")){ //alert($("input[type=checkbox]:checked").length); $(this).parents("tr").toggleClass("selected"); //}else{ //$(this).parent("tr").removeClass("selected"); //} }); // $(this).toggleClass("selected"); }); </script> </head> <body> <table width="500" border="1"> <tr> <td> </td> <td>姓名</td> <td>班级</td> <td>E-mail</td> </tr> <tr> <td><input type="checkbox" class="ck" name="ck" /></td> <td>张三</td> <td>php</td> <td>1223312</td> </tr> <tr> <td><input type="checkbox" class="ck" name="ck" /></td> <td>李四</td> <td>php</td> <td>3574789</td> </tr> <tr> <td><input type="checkbox" class="ck" name="ck" /></td> <td>赵五</td> <td>php</td> <td>345645</td> </tr> <tr> <td><input type="checkbox" class="ck" name="ck" /></td> <td>王六</td> <td>php</td> <td>54765</td> </tr> <tr> <td><input type="checkbox"class="ck" name="ck" /></td> <td>范冰冰</td> <td>php</td> <td>3769088</td> </tr> <tr> <td><input type="checkbox" class="ck" name="ck" /></td> <td>李冰冰</td> <td>php</td> <td>3554853</td> </tr> <tr> <td><input type="checkbox" name="ck" /></td> <td>李春花</td> <td>php</td> <td>46485</td> </tr> </table> </body> </html>