jquery实现控制表格行高亮

[css] 

  1. <style>
  2. .height{
  3.   background:#666666;   /*背景颜色为灰色*/
  4. }
  5. tr{
  6.     cursor: pointer;    /*手形*/
  7. }
  8. </style>

 

[html] 

  1. <body>
  2. <table border=”1″ width=”40%”>
  3.    <tr><th></th><th align=”left”>姓名</th><th align=”left”>性别</th><th align=”left”>居住地</th></tr>
  4.    <tr>
  5.         <td><input type=”radio” name=”radio” /></td><td>张三</td><td>男</td><td>北京</td>
  6.    </tr>
  7.     <tr>
  8.         <td><input type=”radio” name=”radio” /></td><td>李四</td><td>男</td><td>上海</td>
  9.    </tr>
  10.     <tr>
  11.         <td><input type=”radio” name=”radio” /></td><td>王五</td><td>女</td><td>深圳</td>
  12.    </tr>
  13.     <tr>
  14.         <td><input type=”radio” name=”radio” /></td><td>赵六</td><td>女</td><td>北京</td>
  15.    </tr>
  16.     <tr>
  17.         <td><input type=”radio” name=”radio” /></td><td>孙七</td><td>男</td><td>上海</td>
  18.    </tr>
  19. </table>
  20. </body>

jquery

[javascript] 

  1. $(document).ready(function(){
  2.        //第一种写法: $(“tr:gt(0)”)   第一行标题不起作用
  3.        $(“tr:gt(0)”).click(function(){
  4.               $(this).addClass(“height”).siblings().removeClass(“height”).end().find(“:radio”).attr(“checked”,true);
  5.        })
  6.        //第二种写法:$(“tr:not(:first)”)
  7.        /*$(“tr:not(:first)”).click(function(){
  8.               $(this).addClass(“height”).siblings().removeClass(“height”).end().find(“:radio”).attr(“checked”,true);
  9.        })*/
  10. })

标签