编程 Javascript

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

Posted in Javascript onNovember 28, 2013

效果：

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

代码：

<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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

教你如何解密js/vbs/vbscript加密的编码异处理小结

Jun 25 Javascript

JavaScript 三种不同位置代码的写法

Oct 25 Javascript

js中同步与异步处理的方法和区别总结

Dec 25 Javascript

VS2008中使用JavaScript调用WebServices

Dec 18 Javascript

javascript从作用域链谈闭包

Jul 29 Javascript

深入理解JavaScript程序中内存泄漏

Mar 17 Javascript

ES6新特性之变量和字符串用法示例

Apr 01 Javascript

vue中appear的用法

Aug 17 Javascript

基于wordpress的ajax写法详解

Jan 02 Javascript

JavaScript中click和onclick本质区别与用法分析

Jun 07 Javascript

微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

Jan 24 Javascript

在webstorm中配置less的方法详解

Sep 25 Javascript

jQuery计算textarea中文字数(剩余个数)的小程序

Nov 28 #Javascript

javascript打印html内容功能的方法示例

Nov 28 #Javascript

javascript列表框操作函数集合汇总

Nov 28 #Javascript

JavaScript调用客户端的可执行文件(示例代码)

Nov 28 #Javascript

js实现单行文本向上滚动效果实例代码

Nov 28 #Javascript

javascript获取元素CSS样式代码示例

Nov 28 #Javascript

浅析JavaScript中的CSS属性及命名规范

Nov 28 #Javascript