表格的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>
原文地址:https://www.cnblogs.com/zhongfufen/p/2801243.html