在工作中，尤其是后台程序的编写中比较常用，在这里我写了三种方法，我这里下载的JS是，1.8.2，大家可以根据最新的下载，
下载地址：
http://jquery.com/
，下面贴出详细代码：
<!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=gb2312" /> <title>隔行换色，点击选中变色 代码分享</title> <style type="text/css"> table {border:0;border-collapse:collapse;} td {font:normal 12px/17px Arial;padding:2px;width:100px;} th {font:bold 12px/17px Arial;text-align:left;pading:4px;border-bottom:1px solid #333;} .dan{background:#FC0} .ou{background:#F00} .ed{background:#669;color:#fff;} </style> <script src="jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //设置奇偶行 $("tbody>tr:odd").addClass("ou"); $("tbody>tr:even").addClass("dan"); //搜索被选中 has(:checked) $('tbody>tr').click(function(){ var hased = $(this).hasClass('ed'); //方法一 //if(hased){ //$(this).removeClass('ed').find(":input").attr("checked",false); //}else{ //$(this).addClass('ed').find(":input").attr("checked",true); //} //方法二 //if(hased){ //$(this).removeClass('ed').find(":input").attr("checked",!hased); //}else{ //$(this).addClass('ed').find(":input").attr("checked",!hased); //} //方法三 $(this)[hased?"removeClass":"addClass"]("ed").find(":input").attr("checked",!hased); }) }) </script> </head> <body> <table> <thead> <tr><th>choice</th><th>time</th><th>where</th><th>who</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice" value="" /></td><td>2012-9-11</td><td>shenzhen</td><td>chenxuehu</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td><td>2012-9-12</td><td>shenzhen</td><td>chenxuehu</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td><td>2012-9-13</td><td>shenzhen</td><td>chenxuehu</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td><td>2012-9-14</td><td>shenzhen</td><td>chenxuehu</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td><td>2012-9-15</td><td>shenzhen</td><td>chenxuehu</td></tr> </tbody> </table> </body> </html>
文章源自陈学虎-https://chenxuehu.com/article/2012/10/914.html 文章源自陈学虎-https://chenxuehu.com/article/2012/10/914.html
评论