JS实现列表页面隔行变色效果


Posted in Javascript onMarch 25, 2017

先看看隔行变色效果:

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下操作css的float属性的特殊写法
Aug 22 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
Bootstrap表单布局
Jul 19 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
angular仿支付宝密码框输入效果
Mar 25 #Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
axios基本入门用法教程
Mar 25 #Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 #Javascript
ECMAScript6 新特性范例大全
Mar 24 #Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 #Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
pandas数值计算与排序方法
2018/04/12 Python
django session完成状态保持的方法
2018/11/27 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Django 开发环境配置过程详解
2019/07/18 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
工作能力自我评价2015
2015/03/05 职场文书
工作感想范文
2015/08/07 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电