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)
Oct 31 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
js对象基础实例分析
Jan 13 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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使用xpath解析XML的方法详解
2017/05/20 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python中的集合介绍
2019/01/28 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python扫描端口的实现
2021/01/25 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
后勤服务中心总经理工作职责
2014/03/03 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
小学总务工作总结
2015/08/13 职场文书
Python中的变量与常量
2021/11/11 Python
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python