AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


js,隔行变色  
上一篇:bootstrap suggest搜索建议插件使用详解  下一篇:angular仿支付宝密码框输入效果