Table隔行變色的JavaScript代碼
更新時(shí)間：2011年01月17日 22:28:52 作者：
用js實(shí)現(xiàn)的table隔行變色，鼠標(biāo)放上去有變色顯示，需要的朋友可以參考下。
效果演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
核心代碼:
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;
}
}
}
}
[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操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox
下面小編就為大家?guī)硪黄猨s操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript 中實(shí)現(xiàn) use strict的方法及優(yōu)勢(shì)
本教程將討論JavaScript中的use strict特性,在這里,我們將通過不同的示例了解如何在JavaScript代碼語句中創(chuàng)建和執(zhí)行use strict關(guān)鍵字,需要的朋友可以參考下2023-09-09
在web頁面中，我們經(jīng)常需要通過修改樣式（style）來達(dá)到更好的用戶體驗(yàn)，需要的朋友可以參考下。2010-10-10
Java中int與integer的區(qū)別（基本數(shù)據(jù)類型與引用數(shù)據(jù)類型）
這篇文章主要介紹了int與integer的區(qū)別（基本數(shù)據(jù)類型與引用數(shù)據(jù)類型）,簡(jiǎn)單的說 int 是基本數(shù)據(jù)類型，integer 是引用數(shù)據(jù)類型，具體區(qū)別詳解大家參考下本文2017-02-02
一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門類型安全的編程語言，TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型，幫助我們更好地定義和操作數(shù)據(jù)，下面小編就來和大家詳細(xì)聊聊這些數(shù)據(jù)類型的相關(guān)知識(shí)吧2023-06-06
這篇文章主要介紹了JS控制輸入框內(nèi)字符串長(zhǎng)度,需要的朋友可以參考下2014-05-05
javascript中callee與caller的區(qū)別分析
有些小伙伴可能會(huì)問caller,callee 是什么？在javascript 中有什么樣的作用？那么本篇會(huì)對(duì)于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。2015-04-04
這篇文章主要給阿加介紹了關(guān)于JS中一些高效的魔法運(yùn)算符，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
本文主要講解javascript之迭代器，在 JavaScript 中，迭代器是一個(gè)對(duì)象，它定義一個(gè)序列，并在終止時(shí)可能返回一個(gè)返回值。需要詳細(xì)了解相關(guān)知識(shí)的小伙伴可以參考一下這篇文章2021-09-09
event.srcElement+表格應(yīng)用...2006-08-08