用JQuery实现表格隔行变色和突出显示当前行

最新推荐文章于 2020-11-27 18:24:23 发布

shulin85

最新推荐文章于 2020-11-27 18:24:23 发布

阅读量1.4k

点赞数

分类专栏： Jquery 文章标签： jquery function list html table class

Jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原文地址：http://www.cnblogs.com/haiconc/archive/2012/02/10/2345246.html

用JQuery实现表格隔行变色和突出显示当前行

上源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <title>表格隔行背景和突出显示当前行</title>
       <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
       <style type="text/css">
           body{ margin:0 auto; font-size:12px;}
           .data_list td{ width:100px;}
       </style>

       <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");
      })
      </script>
   </head>
   <body>
       <table class="data_list">
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
       </table>
   </body>
</html>

shulin85

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JQuery实现表格隔行变色和突出显示当前行

原文地址：http://www.cnblogs.com/haiconc/archive/2012/02/10/2345246.html 用JQuery实现表格隔行变色和突出显示当前行上源码表格隔行背景和突出显示当前行 body{ margin:0 auto; f
复制链接

扫一扫