key words: css? 隔行換色 控制表格 交替顏色
最近用到不少css的東西,發現用css是可以省不少麻煩,特別更改效果。
google了一篇
下面是實現的代碼:
<style?type="text/css">
<!--
tr?{background-color:expression((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>
關鍵就是這一句:
tr?{background-color:expression((this.sectionRowIndex==0)?"":
(this.sectionRowIndex%2==0)?"red":"blue")}
對于td的控制如下:
<style?type="text/css">
<!--
tr?{background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td?{background-color:expression((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開始
但愿對你有用.? :)