腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

JS小功能(列表頁面隔行變色)簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2013年11月28日 14:59:18 作者：

這篇文章主要介紹了JS列表頁面隔行變色簡(jiǎn)單實(shí)現(xiàn)，有需要的朋友可以參考一下

效果：

代碼：

復(fù)制代碼代碼如下:

<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>
                    種族簡(jiǎn)稱
                </td>
                <td>
                    英雄
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    人類聯(lián)盟
                </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>