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 直接操作本地文件的实现代码
Dec 01 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
SSM VUE Axios详解
Oct 05 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处理json时中文问题的解决方法
2011/04/12 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php实现session共享的实例方法
2019/09/19 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
详解javascript函数的参数
2015/11/10 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Numpy的简单用法小结
2019/08/28 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
党校自我鉴定范文
2013/10/02 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis