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>