• 表格的hover效果,IE6下用JS解决。 当鼠标移动到表格行时出现行背景颜色。


    很久没写博客了,今天发现了个问题,当在IE6下,鼠标经过表格内某行,不会变色,这是因为IE6不支持hover,所以只能用js了。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        <style type="text/css">
            .accounttable{border:1px solid #A2ECFF;}
            .accounttable thead{font-weight:bold;text-align:center;}
            .accounttable thead td{background-color:#C0EDFF;}
            .accounttable tr{height:30px;line-height:30px;}
            .accounttable tr td {padding:3px;text-align:center;}
            .accounttable .hasDatepicker{width:50px;}
            .accounttable tr:hover,tr.hover{background:#7ADAFF;}
        </style>
    </head>
    <body>
        <table class="accounttable" width="90%" border="0" cellSpacing="0" cellPadding="0">
                    <thead>
                        <tr>
                            <td>姓名</td>
                            <td>日期</td>
                            <td>金额</td>
                            <td>说明</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>2009-01-02</td>
                            <td>12.35</td>
                            <td>A股</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>2009-02-02</td>
                            <td>122.35</td>
                            <td>B股</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>2009-03-02</td>
                            <td>132.35</td>
                            <td>现金</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>2009-04-02</td>
                            <td>142.35</td>
                            <td>港股</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>2009-05-02</td>
                            <td>152.35</td>
                            <td>保险</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>2009-06-02</td>
                            <td>162.35</td>
                            <td>基金</td>
                        </tr>
                    </tbody>
                </table>
        <script type="text/javascript">
            var rows = document.getElementsByTagName("tr");
            for(var i = 0; i < rows.length; i++){
             rows[i].onmouseover = function(){
              this.className = "hover";
             }
             rows[i].onmouseout = function(){
              this.className = "";
             }
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    ZABBIX监控TCP连接状态
    MySQL索引(九)
    MySQL字符集、information_schema元数据(八)
    DML(数据库操作语言)(六)
    DDL(数据库定义语言)(五)
    MySQL多实例安装、配置、启动(四)
    CentOS7 编译安装MySQL5.6.38(一)
    MySQL权限管理、配置文件(三)
    MySQL服务的构成(二)
    yum lockfile is held by another process
  • 原文地址:https://www.cnblogs.com/zhongfufen/p/2801243.html
Copyright © 2020-2023  润新知