zoukankan      html  css  js  c++  java
  • 用JQuery实现表格隔行变色和突出显示当前行

    用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{ 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>

  • 相关阅读:
    297.白盒测试
    301.多媒体讲台使用事项
    289.南信大知网登录
    296.deepin下载安装、root改密、cpu不降频、修改快捷键、创建启动器快捷方式、win文件访问、直接进win无deepin启动项
    295.博客园win&苹果PC客户端开源项目整理
    利用loganalyzer展示MySQL中rsyslog日志
    利用inotify和rsync实现数据的实时同步
    samba服务配置实践
    NFS服务配置实践
    FTP服务配置实践
  • 原文地址:https://www.cnblogs.com/haiconc/p/2345246.html
Copyright © 2011-2022 走看看