使表格橫列兩色交錯的Javascript

Bit Size Standards今天有一篇Automatic coloured rows，介紹如何讓表格橫列的底色自動由不同的顏色交錯形成，亦即如本範例中，單數列為灰色，而雙數列為白色。

要完成這個效果，只要在網頁中加入以下這段javascript即可：

<script language="JavaScript" type="text/javascript">

window.onload = colorRows;
function colorRows() {
    var myTR = document.getElementsByTagName('tr');
    for (var i=0;i<myTR.length;i++) {
            if (i%2) {
                    myTR[i].className = 'rowTint';
            }
    }
}
</script>

也可以下載我已經存好的js檔案（請按右鍵，另存新檔），然後在網頁的head元素間把這個檔案include進來即可。

<script language="JavaScript" type="text/javascript" src="（檔案存放路徑）auto-colored-rows.js">
</script>

除了加入這段script之外，還要在CSS檔案裡面增加.rowTint這個樣式，本例的設定為：

.rowTint {
	background-color: #ccc;
	}

經過這樣的設定後，單數列的表格底色便為灰色，而雙數列的底色則為未經設定的白色了。

這個方法同樣適用於清單元素（<li>），各位可以把script中的getElementsByTagName(’tr‘)替換成getElementsByTagName(’li‘)試試看。

這篇文章發表於 April 17th, 2006 ，分類為：Webdev，並且加上了以下的標籤：javascript, Webdev。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。