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优化技巧(文件瘦身篇)
Jan 28 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
vue 实现上传组件
May 31 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
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python实现员工管理系统
2018/01/11 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
网络安全方面的面试题
2015/11/04 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
产品质量保证书
2014/04/29 职场文书
小浪底导游词
2015/02/12 职场文书
关于的python五子棋的算法
2022/05/02 Python
Nginx安装配置详解
2022/06/25 Servers