编程 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 判断函数类型完美解决方案

Sep 02 Javascript

不同浏览器的怪癖小结

Jul 11 Javascript

Web跨浏览器进程通信(Web跨域)

Apr 17 Javascript

JSCode all of Brower 全局屏蔽网页右键功能具体实现

Jun 05 Javascript

JS返回上一页实例代码通过图片和按钮分别实现

Aug 16 Javascript

javascript与css3动画结合使用小结

Mar 11 Javascript

JavaScript包装对象使用详解

Jul 09 Javascript

jQuery利用sort对DOM元素进行排序操作

Nov 07 Javascript

jquery实现简单的瀑布流布局

Dec 11 Javascript

Vue.js组件高级特性实例详解

Dec 24 Javascript

Vue 解决多级动态面包屑导航的问题

Nov 04 Javascript

Vue使用axios引起的后台session不同操作

Aug 14 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