当前位置: 代码迷 >> Web前端 >> 报表 各行换色
  详细解决方案

报表 各行换色

热度:435   发布时间:2012-08-25 10:06:20.0
表格 各行换色

?

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>各行换色</title>
    <script type="text/javascript">
        function show() {
            var tab = document.getElementById("tab");
            var tr = tab.getElementsByTagName("tr");
            for (var i = 0; i < tr.length; i++) {
                if (i % 2 == 0) {
                    tr[i].style.backgroundColor = "#ccc";
                    tr[i].onmouseover = function () { this.style.background = "red" };
                    tr[i].onmouseout = function () { this.style.background = "#ccc" }
                } else {
                    tr[i].style.backgroundColor = "#fff";
                    tr[i].onmouseover = function () { this.style.background = "red" };
                    tr[i].onmouseout = function () { this.style.background = "#fff" }
                }
            }
        }
        window.onload = show;
    </script>
</head>
<body>
    <table id="tab">
        <tr>
            <td>
                11111111111
            </td>
            <td>
                22222222222
            </td>
        </tr>
        <tr>
            <td>
                33333333333
            </td>
            <td>
                44444444444
            </td>
        </tr>
        <tr>
            <td>
               555555555555
            </td>
            <td>
                66666666666
            </td>
        </tr>
        <tr>
            <td>
                77777777777
            </td>
            <td>
                88888888888
            </td>
        </tr>
        <tr>
            <td>
                99999999999
            </td>
            <td>
                00000000000
            </td>
        </tr>
    </table>
</body>
</html>

?运行效果:

  相关解决方案