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

更新时间：2017年03月25日 09:04:17 作者：good8888job

这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

微信小程序使用车牌号输入法的示例代码
这篇文章主要介绍了微信小程序使用车牌号输入法的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
JS原生手写轮播图效果
这篇文章主要为大家详细介绍了JS原生手写轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
js获取ip和地区
本文主要介绍了js获取ip和地区的方法，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JS的Event事件对象使用方法
复习下事件,长年用JQ,都给忘了~
2010-12-12
微信小程序常用表单组件的使用详解
本文主要为大家介绍了微信小程序中常用的几个表单组件的使用方法，例如：button、CheckBox、input、form等，感兴趣的可以了解一下
2022-03-03
JavaScript 手动实现instanceof的方法
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，本文重点给大家介绍JavaScript手动实现instanceof的问题，感兴趣的朋友跟随小编一起看看吧
2021-10-10
js实现上传图片及时预览
这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下
2016-05-05
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
这篇文章主要介绍了JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系的相关资料,需要的朋友可以参考下
2015-11-11
原生js的ajax和解决跨域的jsonp(实例讲解)
下面小编就为大家带来一篇原生js的ajax和解决跨域的jsonp(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
浅谈gulp创建完整的项目流程
本篇文章主要介绍了浅谈gulp创建完整的项目流程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12