zoukankan      html  css  js  c++  java
  • 表格的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>
  • 相关阅读:
    计算机执行程序代码的过程分析
    iOS 操作系统架构
    ios 概况了解
    android ApplicationContext Context Activity 内存的一些学习
    android 内存优化一
    android 学习
    ios 基础学习二
    ios 集合总结
    线程之间的通讯---SynchronizationContext
    ASP.NET Core 身份验证及鉴权
  • 原文地址:https://www.cnblogs.com/zhongfufen/p/2801243.html
Copyright © 2011-2022 走看看