隔行换色,点击选中变色 代码分享

老虎说测试 前端技术字数 2120阅读7分4秒阅读模式
摘要在工作中,尤其是后台程序的编写中比较常用,在这里我写了三种方法,我这里下载的JS是,1.8.2,大家可以根据最新的下载,

在工作中,尤其是后台程序的编写中比较常用,在这里我写了三种方法,我这里下载的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

历史上的今天
10月
14
 最后更新:2022-3-2
  • 版权声明:本文为原创文章,转载请附上原文出处链接及本声明。
  • 转载请注明:隔行换色,点击选中变色 代码分享 | https://chenxuehu.com/article/2012/10/914.html