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>
Javascript 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
Javascript中神奇的this
Jan 20 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
vue模板语法-插值详解
Mar 06 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
微信小程序实现图片上传
May 23 Javascript
javascript实现留言板功能
Feb 08 Javascript
Vue实现简易计算器
Feb 25 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
JS实现随机点名器
Apr 12 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
You might like
YII中assets的使用示例
2014/07/31 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP xpath()函数讲解
2019/02/11 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
python中requests和https使用简单示例
2018/01/18 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
自我鉴定三原则
2014/01/13 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
优秀求职信
2014/05/29 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
MySQL sql_mode的使用详解
2021/05/08 MySQL