CSS实现表格隔行换色的代码

时间:2015/12/2 15:29:00来源:互联网 作者:flyso 点击: 966 次

<style type="text/css">
<!--
tr {background-color:e-xpression((this.sectionRowIndex==0)?"":
(this.sectionRowIndex%2==0)?"red":"blue")}
-->
</style>
</HEAD>
<table>
<tr>
<td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td>
</tr>
<tr>
<td>第3行</td><td>第3行</td>
</tr>
<tr>
<td>第4行</td><td>第4行</td>
</tr>
<tr>
<td>第5行</td><td>第5行</td>
</tr>
</table>
 


对于td的控制如下:

<style type="text/css">
<!--
tr {background-color:e-xpression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:e-xpression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
</HEAD>
<table>
<tr><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td></tr>
</table>


即cellIndex 

另:和数组一样,第一行从0开始
 


Copyright © 2005 - 2016 flyso.cn. 飞搜 版权所有 鄂ICP备11002783号-3