您的位置：首页 > Web前端 > JavaScript

JS小功能(列表页面隔行变色)简单实现

2013-11-28 00:00 711 查看

效果：

代码：

<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var otab = document.getElementById('tab1');
            var thiscolor = '';
            for (var i = 0; i < otab.tBodies[0].rows.length; i++) {
                otab.tBodies[0].rows[i].onmouseover = function () {
                    thiscolor = this.style.background;
                    this.style.background = '#00FFFF';
                };
                otab.tBodies[0].rows[i].onmouseout = function () {
                    this.style.background = thiscolor;
                };
                if (i % 2) {
                    otab.tBodies[0].rows[i].style.background = '';
                }
                else {
                    otab.tBodies[0].rows[i].style.background = '#FFFF00';
                }
            }
        };
    </script>
</head>
<body>
    <table id="tab1" border="1" style="text-align: center; width: 500px; margin: 200px auto">
        <thead>
            <tr style="background-color: #FF0000">
                <td>
                    种族名称
                </td>
                <td>
                    种族简称
                </td>
                <td>
                    英雄
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    人类联盟
                </td>
                <td>
                    HUM
                </td>
                <td>
                    代表性英雄：AM
                </td>
            </tr>
            <tr>
                <td>
                    兽人部落
                </td>
                <td>
                    ORC
                </td>
                <td>
                    代表性英雄：BM
                </td>
            </tr>
            <tr>
                <td>
                    不死亡灵
                </td>
                <td>
                    UD
                </td>
                <td>
                    代表性英雄：DK
                </td>
            </tr>
            <tr>
                <td>
                    暗夜精灵
                </td>
                <td>
                    NE
                </td>
                <td>
                    代表性英雄：DH
                </td>
            </tr>
        </tbody>
    </table>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航