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