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 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>