编程 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 装载iframe子页面，自适应高度

Mar 20 Javascript

js中更短的 Array 类型转换

Oct 30 Javascript

javascript之Partial Application学习

Jan 10 Javascript

谷歌地图打不开的解决办法

Aug 07 Javascript

IE浏览器不支持getElementsByClassName的解决方法

Aug 27 Javascript

jQuery animate easing使用方法图文详解

Jun 17 Javascript

JS实现获取剪贴板内容的方法

Jun 21 Javascript

element-ui 关于获取select 的label值方法

Aug 24 Javascript

详解如何搭建mpvue框架搭配vant组件库的小程序项目

May 16 Javascript

vue实现评价星星功能

Jun 30 Javascript

基于javascript canvas实现五子棋游戏

Jul 08 Javascript

vue-cli脚手架的.babelrc文件用法说明

Sep 11 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