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版DateAdd和DateDiff函数代码
Mar 01 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JS功能代码集锦
May 04 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 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函数代码
2010/04/22 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python 的类、继承和多态详解
2017/07/16 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python实现梯度法 python最速下降法
2020/03/24 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
网管求职信
2014/03/03 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
离婚协议书范文
2015/01/26 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
雾霾停课通知
2015/04/24 职场文书
2016年教师节慰问信
2015/12/01 职场文书