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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
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中动态HTML的输出技术
2006/10/09 PHP
php 分页类 扩展代码
2009/06/11 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
js读写json文件实例代码
2014/10/21 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
详解js类型判断
2018/05/22 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python最小二乘法矩阵
2019/01/02 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
师范生自荐信
2013/10/27 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
详解Redis复制原理
2021/06/04 Redis