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 # 隔行变色 # JS控制表格隔行变色 # js取模（求余数）隔行变色 # JS小功能(列表页面隔行变色)简单实现 # 原生JS操作网页给p元素添加onclick事件及表格隔行变色 # Table隔行变色的JavaScript代码 # js隔行变色、鼠标划过变色代码 # 高效的表格行背景隔行变色及选定高亮的JS代码 # javascript实现table表格隔行变色的方法 # jQuery隔行变色与普通JS写法的对比 # JavaScript实现99乘法表及隔行变色实例代码 # 不死 # 兽人 # 大家多多 # 暗夜精灵 # onload # function # var # window # script # type # javascript # tBodies # thiscolor # getElementById # otab # rows # document # title # br # pre

返回目录在线咨询

上一篇：在Linux VPS中如何确保网站安全，防止黑客攻击？
下一篇：c++中的std::shared_mutex怎么用_c++读写锁实现高并发读

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求