jquery 实现table隔行变色、复选框的选择变色的代码
发布时间：2015-10-31 编辑：jiaochengji.com
分享一个jquery实例代码，用于实现table隔行变色及复选框的选择变色功用。有需要的朋友参考下。
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.jbxue.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>您可能感兴趣的文章：
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
jQuery 行背景颜色的交替显示(隔行变色)实现代码
jquery 实现table隔行变色、复选框的选择变色的代码
Jquery表格隔行变色的代码
jquery实现带复选框的表格行选中删除时高亮显示
jquery入门—选择器实现隔行变色实例代码
Jquery选择器实现隔行变色的代码一例
JQuery实现表格隔行换色(隔行变色)效果代码一例
jquery数据删除与隔行变色的实现代码一例
javascript实现隔行变色函数代码一例
[关闭]