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