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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
Prototype Function对象 学习
Jul 12 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
JavaScript运动原理基础知识详解
Apr 02 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
PHP分页效率终结版(推荐)
2013/07/01 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
twig模板常用语句实例小结
2016/02/04 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python环境变量设置方法
2016/08/28 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python装饰器用法实例总结
2018/05/26 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python复合条件下的字典排序
2020/12/18 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
大学生实习思想汇报
2014/01/12 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
自荐信的格式
2014/03/10 职场文书
行政监察建议书
2014/05/19 职场文书
文明城市标语
2014/06/16 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python