隔行换色通常用在列表页中,目的是让用户看的清楚每一行,通常有几种方法实现。
1、使用bgcolor属性
2、平铺背景图片
3、CSS类定义
4、纯CSS打造
5、js实现
第一种:也是最基本的,使用bgcolor属性
[code]
[/code]
也可在程序中动态输出bgcolor中的值。
第二种,平铺图片,使用一张隔行换色的图片作为背景图片
[code]
[/code]
这种方法有一个缺点就是:表格的高度要等于图片高度的一半。
第三种方法,使用CSS类,先定义两个类,每个类对应不同的颜色,使用的方法和方法一差不多
[code]
.t1{
background-color:yellow;
}
.t2{
background-color:orange;
}
[/code]
第四种方法:纯CSS打造
[code]
tr{ yexj00:expression(this.style.background=(rowIndex%2==1)?’orange’:’yellow’)}
[/code]
此方法有个缺点,只支持IE
第五种,纯javascript打造
[code]
td{
height:20px;
}
function bgChange(){
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for(var i=0; i
var odd = false;
trs = tables[i].getElementsByTagName("tr");
for(var j=0; j
if(odd==true){
trs[j].style.background = "orange";
odd = false;
}else{
trs[j].style.background = "yellow";
odd = true;
}
}
}
}
window.onload = bgChange;
[/code]