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

  • A+
所属分类:前端技术
摘要

在工作中,尤其是后台程序的编写中比较常用,在这里我写了三种方法,我这里下载的JS是,1.8.2,大家可以根据最新的下载,

在工作中,尤其是后台程序的编写中比较常用,在这里我写了三种方法,我这里下载的JS是,1.8.2,大家可以根据最新的下载,
下载地址:
http://jquery.com/
,下面贴出详细代码:
[php]<!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>
[/php]

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: