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 相关文章推荐
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
Vue制作Todo List网页
Apr 26 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
原生js简单实现放大镜特效
May 16 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
图解JS原型和原型链实现原理
Sep 15 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
5 cool javascript apps
2007/03/24 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python 异常处理的实例详解
2017/09/11 Python
python 日期操作类代码
2018/05/05 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python3内置模块random随机方法小结
2019/07/13 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
手术室护士自我鉴定
2013/10/14 职场文书
生产班组长岗位职责
2014/01/05 职场文书
学校安全教育制度
2014/01/31 职场文书
保送生自荐信范文
2015/03/26 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
python非标准时间的转换
2021/07/25 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技