编程 Javascript

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>

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

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

- Author -

good8888job

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中的Math.sin()方法使用详解

Jun 15 Javascript

浅谈javascript中的call、apply、bind

Mar 06 Javascript

全面解析Angular中$Apply()及$Digest()的区别

Aug 04 Javascript

使用vue.js实现联动效果的示例代码

Jan 10 Javascript

ES6中Math对象的部分扩展

Feb 20 Javascript

微信小程序页面开发注意事项整理

May 18 Javascript

使用node.js实现微信小程序实时聊天功能

Aug 13 Javascript

vuedraggable+element ui实现页面控件拖拽排序效果

Jul 29 Javascript

微信小程序new Date()方法失效问题解决方法

Jul 29 Javascript

vue项目中极验验证的使用代码示例

Dec 03 Javascript

JavaScript中如何调用Java方法

Sep 16 Javascript

vue使用vant中的checkbox实现全选功能

Nov 17 Vue.js

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