jquery学习之-设置table奇偶行的背景色,并触发单选框选中效果

来源:互联网 发布:常见网络攻击手段 编辑:程序博客网 时间:2024/04/28 00:42

<!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>TableBackColorDemo</title>

<style>
.even{background:#FFF38F;}
.odd{background:#FFFFEE;}
.selected{background:#FF9900;}
</style>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 var last;
 var lastClass;
 $(function(){
  $("tr:odd").addClass("odd");
  $("tr:even").addClass("even");
  $("tr").click(function()
  {
   var end = $(this).addClass("selected").siblings().removeClass("selected").end();
   end.find(":radio").attr("checked", true);
   end.siblings().find(":radio").attr("checked", false);
  });
 });
</script>

</head>
<body>
 <table>
  <thead>
   <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  </thead>
  <tbody>
   <tr><td><input type="radio" ></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td><input type="radio" ></td><td>李四</td><td>女</td><td>浙江杭州</td></tr>
   <tr><td><input type="radio" ></td><td>王五</td><td>男</td><td>湖南长沙</td></tr>
   <tr><td><input type="radio" ></td><td>赵六</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td><input type="radio" ></td><td>Rain</td><td>男</td><td>浙江温州</td></tr>
  </tbody>
 </table>
</body>