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 相关文章推荐
菜单效果
Oct 14 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
详解vue中v-for的key唯一性
May 15 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
重置版游戏视频
2020/04/09 魔兽争霸
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
PyMongo安装使用笔记
2015/04/27 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
护士自我鉴定
2013/10/23 职场文书
C++程序员求职信范文
2014/04/14 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
消防隐患整改通知书
2015/04/22 职场文书
公司周年庆寄语
2019/06/21 职场文书
导游词幽默开场白
2019/06/26 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python