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