Table隔行變色的JavaScript代碼

更新時間：2011年01月17日 22:28:52 作者：

用js實(shí)現(xiàn)的table隔行變色，鼠標(biāo)放上去有變色顯示，需要的朋友可以參考下。

效果演示代碼:

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

核心代碼:

復(fù)制代碼代碼如下:

function showtable(){ 
var color1 = "rgb(234,240,255)"; 
var color2 = "rgb(255,255,255)"; 
var bgColor = "rgb(255,255,193)"; 
var trs = document.getElementById("datatable").getElementsByTagName("tr"); 
for (var i=0;i<trs.length-1;i++){ 
if (i%2==0) { 
trs[i].style.backgroundColor=color1; 
trs[i].onmouseover = function(){ 
this.style.backgroundColor = bgColor; 
} 
trs[i].onmouseout = function(){ 
this.style.backgroundColor = color1; 
} 
} else { 
trs[i].style.backgroundColor=color2; 
trs[i].onmouseover = function(){ 
this.style.backgroundColor = bgColor; 
} 
trs[i].onmouseout = function(){ 
this.style.backgroundColor = color2; 
} 
} 
} 
}

您可能感興趣的文章:

相關(guān)文章

JS無限級導(dǎo)航菜單實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于JS無限級導(dǎo)航菜單實(shí)現(xiàn)方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
js實(shí)現(xiàn)向右橫向滑出的二級菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)向右橫向滑出的二級菜單效果,涉及javascript鼠標(biāo)事件及頁面元素的隱藏與顯示實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
實(shí)例解析ES6 Proxy使用場景介紹
本篇文章主要介紹了ES6 Proxy使用場景介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
@ResponseBody 和 @RequestBody 注解的區(qū)別
這篇文章主要介紹了@ResponseBody 和 @RequestBody 注解的區(qū)別的相關(guān)資料,需要的朋友可以參考下
2017-03-03
ES6概念 Symbol toString()方法
這篇文章主要介紹了ES6概念 Symbol toString()方法,需要的朋友可以參考下
2016-12-12
JSON與String互轉(zhuǎn)的實(shí)現(xiàn)方法(Javascript)
下面小編就為大家?guī)硪黄狫SON與String互轉(zhuǎn)的實(shí)現(xiàn)方法(Javascript) 。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-09-09
基于Bootstrap table組件實(shí)現(xiàn)多層表頭的實(shí)例代碼
Bootstrap table還有一個很多強(qiáng)大的功能，下面就通過本文給大家分享基于Bootstrap table組件實(shí)現(xiàn)多層表頭的實(shí)例代碼，需要的朋友參考下吧
2017-09-09
解決html按鈕切換綁定不同函數(shù)后點(diǎn)擊時執(zhí)行多次函數(shù)問題
這篇文章主要介紹了如何解決html按鈕切換綁定不同函數(shù)后點(diǎn)擊時執(zhí)行多次函數(shù)問題,需要的朋友可以參考下
2014-05-05
JS自定義選項(xiàng)卡函數(shù)及用法實(shí)例分析
這篇文章主要介紹了JS自定義選項(xiàng)卡函數(shù)及用法,以實(shí)例形式較為詳細(xì)的分析了javascript自定義tab切換函數(shù)及使用方法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
詳解Document.Cookie
這篇文章主要介紹了詳解Document.Cookie的相關(guān)資料,需要的朋友可以參考下
2015-12-12