JS實現(xiàn)列表頁面隔行變色效果
更新時間：2017年03月25日 09:04:17 作者：good8888job
這篇文章主要為大家詳細介紹了JS實現(xiàn)列表頁面隔行變色效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
先看看隔行變色效果：
代碼：
<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>
人類聯(lián)盟
</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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
最近用js拼接字符串時遇到問題了，不論怎么拼接在ie中都報錯，于是找到了一個不錯的解決方法，在此與大家分享下2014-03-03
下面小編就為大家?guī)硪黄猨s 獲取html5的data屬性實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了讓html頁面不緩存js的實現(xiàn)方法,分析了HTML頁面緩存js的原理,并由此分析實現(xiàn)不緩存js的方法,是非常實用的技巧,需要的朋友可以參考下2014-10-10
這篇文章主要給大家介紹了關于JavaScript中reduce()的5個基本用法示例，文中通過示例代碼以及圖文介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
這篇文章主要介紹了javascript事件冒泡原因、顯示效果及阻止冒泡的方法,需要的朋友可以參考下2016-06-06
在下面的文本框中輸入中文文字，按“轉化”，即可將其轉化為UTF-8字符。2010-06-06
這篇文章主要介紹了微信小程序iOS下拉白屏晃動問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
bootstrap-treeview自定義雙擊事件實現(xiàn)方法
這篇文章主要介紹了bootstrap-treeview自定義事件雙擊事件實現(xiàn)方法,需要的朋友可以參考下2016-01-01
本文為大家詳細介紹下通過jquery和原生javascript判斷瀏覽器信息包括：判斷瀏覽器是否為IE以及IE版本是多少等等，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這是一個很特殊的方法，但是其存在的意義很大。不過很可惜只有firefox支持了。一個簡單的例子解釋一下它的用處2009-04-04