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>
转载于:https://www.cnblogs.com/Azmzb/p/4912747.html
相关资源：jQuery Table选中表格行变色代码.zip
