超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff) [复制链接]

hutchin　楼主

蔚蓝的故乡

银牌会员 

帖子: 1969
体力: 2708
威望: 1
居住地: 辽宁省沈阳市

发表于 2008-5-15 22:49:10 |显示全部楼层

前几天由于工作需要,要对一个表格进行隔行换色,还要加上鼠标经过效果,但是表格由程序生成,如果在tr标签中添加onmouseover,onmouseout效果的话工作量很大,遂尝试用js实现以上功能,唯一要对表格做的改动就是给table标签加上id.

从网上搜索了很多方法,几乎都是对tr标签进行修改,还好找到了一个完全通过js实现隔行换色的(经过转载已无法考证作者),不过不支持鼠标经过变色,经过我的修改现在已经支持鼠标经过变色了.
这段代码体现了web重构的思想,实现了结构与表现分离.

请看效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style language="text/css">
/*第一种颜色*/
#table tr.color1{
	background-color:#FFFFFF;
}
/*第二种颜色*/
#table tr.color2{
	background-color:#F8F8F8;
}
</style>
<script type="text/javascript">

</script>
</head>

</html>

提示：您可以先修改部分代码再运行

使用方法:
1.给你的table加上一个id.这个例子中我加的id是table.
2.将以下代码插入到head区中,按照注释修改颜色和id.

<style language="text/css">
/*第一种颜色*/
#table tr.color1{
background-color:#FFFFFF;
}
/*第二种颜色*/
#table tr.color2{
background-color:#F8F8F8;
}
</style>
<script type="text/javascript">
<!--
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tableid='table'; //表格的id
var overcolor='#FCF9D8'; //鼠标经过颜色
var color1='#FFFFFF'; //第一种颜色
var color2='#F8F8F8'; //第二种颜色
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for(var i=1 ;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1";
}else{
tr[i].className="color2";
}
}
}
onloadEvent(showtable);
-->
</script>

复制代码

3.enjoy it.

感谢原作者,也谢谢你用一点点时间看完了我这个帖子.希望这段代码能给你带来方便.

已有 1 人评分	威望	收起理由
caiying2007	+ 1	支持原创

总评分: 威望 + 1 查看全部评分

代码要像美女的裙子,越短越好

		自动登录	找回密码
密码			注册

超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff) [复制链接]

浏览过的帖子

浏览过的版块