JQuery表格隔行背景和突出显示当前行

先上图，当前鼠标停留在‘李四’这行上，这行的背景色就变了。

这种情况大家在很多地方也能见到，实现起来很简单。

废话不多说，直接贴源码。

注：需要引入 jquery-1.7.2.min.js

<html>
    <head>
        <title>表格隔行背景和突出显示当前行</title>
        
        <style type="text/css">
            body{ margin:0 auto; font-size:12px;}
            .data_list td{ width:100px;}
        </style>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript">

      $(document).ready(function(){
            $(".data_list tr td").mouseover(function(){
                $(this).parent().find("td").css("background-color","#d5f4fe");
            });
      })

      $(document).ready(function(){ 
            $(".data_list tr td").mouseout(function(){
                var bgc = $(this).parent().attr("bg");
                $(this).parent().find("td").css("background-color",bgc);
            });
      })
      
      $(document).ready(function(){ 
            var color="#ffeab3"
            $(".data_list tr:odd td").css("background-color",color); 
            $(".data_list tr:odd").attr("bg",color);
            $(".data_list tr:even").attr("bg","#fff");
      })
      
      $(document).ready(function(){
      var color="#ff00ff"
      $(".data_list tr:has(th) th").css("background-color",color);
      $(".data_list tr td").css("text-align","center");
      }
      )
      </script>
    </head>
    <body>
        <table class="data_list">
        <tr><th> 姓名 </th>  <th> 年龄 </th></tr>
        <tr><td> 张三 </td>  <td> 3 </td></tr>
        <tr><td> 李四 </td>  <td> 4 </td></tr>
        <tr><td> 王五</td>  <td> 5 </td></tr>
        <tr><td> 赵六</td>  <td> 6 </td></tr>
        <tr><td> 胡七</td>  <td> 7 </td></tr>
        
        </table>
    </body>
</html>
posted @ 2012-10-07 23:02  张小三、  阅读(995)  评论(0)    收藏  举报