jQuery实现表格选中行变色

最新推荐文章于 2024-11-13 17:27:29 发布

weixin_30348519

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Azmzb/p/4912747.html

版权

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>jQuery实现表格选中行变色</title>
 6 <style type="text/css">
 7 .s1 {
 8  background-color: yellow;
 9 }
10 </style>
11 
12 <script type="text/javascript">
13  $(function() {
14   $("tbody tr").click(function() {
15    $(this).addClass("s1").siblings().removeClass("s1");
16    $(this).find(":radio").attr("checked", true);
17   });
18  });
19 </script>
20 </head>
21 <body>
22  <table border="1" width="60%">
23   <thead>
24    <tr>
25     <th>操作</th>
26     <th>姓名</th>
27     <th>邮箱</th>
28     <th>年龄</th>
29     <th>性别</th>
30    </tr>
31   </thead>
32   <tbody>
33    <tr>
34     <td><input name="c" value="c1" type="radio" /></td>
35     <td>张三丰</td>
36     <td>zsf@163.com</td>
37     <td>32</td>
38     <td>男</td>
39    </tr>
40 
41     <td>张无忌</td>
42     <td>zwj@163.com</td>
43     <td>22</td>
44     <td>男</td>
45    </tr>
46    <tr>
47     <td><input type="radio" name="c" value="c3" /></td>
48     <td>杨过</td>
49     <td>yangguo@163.com</td>
50     <td>12</td>
51     <td>男</td>
52    </tr>
53 
54     <td>小龙女</td>
55     <td>xln@163.com</td>
56     <td>18</td>
57     <td>女</td>
58    </tr>
59   </tbody>
60  </table>
61 </body>
62 </html>