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触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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
URL Rewrite的设置方法
2007/01/02 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
ionic2懒加载配置详解
2017/09/01 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
python爬虫爬取网页表格数据
2018/03/07 Python
python中退出多层循环的方法
2018/11/27 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
优秀学生评语大全
2014/04/25 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
六年级小学生评语
2014/12/26 职场文书
大连星海广场导游词
2015/02/10 职场文书
学校重阳节活动总结
2015/03/24 职场文书
会计出纳岗位职责
2015/03/31 职场文书
正规借条模板
2015/05/26 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书