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

2019-11-19 17:02:28

字体：大中小

来源：转载

供稿：网友

先看看隔行变色效果：

代码：

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

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

上一篇：bootstrap suggest搜索建议插件使用详解

下一篇：angular仿支付宝密码框输入效果