Table隔行变色的JavaScript代码
更新时间：2011年01月17日 22:28:52 作者：
用js实现的table隔行变色，鼠标放上去有变色显示，需要的朋友可以参考下。
效果演示代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
核心代码:
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需再刷新一下页面才能执行]
核心代码:
复制代码 代码如下:
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;
}
}
}
}
相关文章
下面小编就为大家带来一篇js操作XML文件的实现方法兼容IE与FireFox。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JavaScript 中实现 use strict的方法及优势
本教程将讨论JavaScript中的use strict特性,在这里,我们将通过不同的示例了解如何在JavaScript代码语句中创建和执行use strict关键字,需要的朋友可以参考下2023-09-09
在web页面中，我们经常需要通过修改样式（style）来达到更好的用户体验，需要的朋友可以参考下。2010-10-10
Java中int与integer的区别（基本数据类型与引用数据类型）
这篇文章主要介绍了int与integer的区别（基本数据类型与引用数据类型）,简单的说 int 是基本数据类型，integer 是引用数据类型，具体区别详解大家参考下本文2017-02-02
作为一门类型安全的编程语言，TypeScript 提供了多种内置数据类型，帮助我们更好地定义和操作数据，下面小编就来和大家详细聊聊这些数据类型的相关知识吧2023-06-06
这篇文章主要介绍了JS控制输入框内字符串长度,需要的朋友可以参考下2014-05-05
有些小伙伴可能会问caller,callee 是什么？在javascript 中有什么样的作用？那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。2015-04-04
这篇文章主要给阿加介绍了关于JS中一些高效的魔法运算符，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
本文主要讲解javascript之迭代器，在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时可能返回一个返回值。需要详细了解相关知识的小伙伴可以参考一下这篇文章2021-09-09
event.srcElement+表格应用...2006-08-08
最新评论