JS实现列表页面隔行变色效果的示例代码分享

来源：懂视网责编：小OO 时间：2020-11-27 20:23:33

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；this.style.background = '；#00FFFF'；}；}；'；} } }。

推荐度：

点击下载本文 文档为doc格式

导读先看看隔行变色效果。代码。<；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；this.style.background = '；#00FFFF'；}；}；'；} } }。

这篇文章主要为大家详细介绍了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实现列表页面隔行变色效果的示例代码分享

推荐度：

点击下载本文 文档为doc格式

标签：分享实现 js

热门焦点

JS实现列表页面隔行变色效果的示例代码分享

JS实现列表页面隔行变色效果的示例代码分享

JS实现列表页面隔行变色效果的示例代码分享

最新推荐

猜你喜欢

热门推荐