當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 如何設置表格的交替行顏色

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

2012/10/31 20:18:02作者：佚名來源：網絡

移動端

【實例名稱】

設置表格的交替行顏色

【實例描述】

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

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（www.yzddtk.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>

【運行效果】

運行效果

【難點剖析】

本例的重點是設置交替變色的樣式表?！皉owIndex”用來判斷表格的行索引，如果能被2整除，則顏色設置為“gray”，否則設置為“#ffffcc”。注意代碼中改變樣式的語法。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性，你可以點擊：設置表格的交替行顏色進行本實例源碼下載

標簽：表格顏色

上一篇：刪除表格指定行JS代碼怎么寫
下一篇：雙擊單元格變為可編輯JS代碼怎么寫

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频