如何設置表格的交替行顏色

2012/10/31 20:18:02作者：佚名來源：網(wǎng)絡

移動端

【實例名稱】

設置表格的交替行顏色

【實例描述】

使用ASP．NET中的表格控件時，可以很方便地設計表格的交替行顏色。但HTML表格沒有提這種功能。本例將利用樣式表實現(xiàn)這種交替變色的效果。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（m.wangbatian.cn）</title>
<style>
  tr{
  bgcolor:expression(this.bgColor=((this.rowIndex)%2==0 )? 'gray' : '#ffffcc');
  }
</style>
</head>
<body>
    <table id="tbl" width="300" border="1" >
    <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
    <tr><td>第二行第一列</td><td>第二行第二列</td></tr>
    <tr><td>第三行第一列</td><td>第三行第二列</td></tr>
    <tr><td>第四行第一列</td><td>第四行第二列</td></tr>
    <tr><td>第五行第一列</td><td>第五行第二列</td></tr>
    <tr><td>第六行第一列</td><td>第六行第二列</td></tr>
    <tr><td>第七行第一列</td><td>第七行第二列</td></tr>
    </table>
</body>
</html>

【運行效果】

運行效果