jQuery – 快速建立表格換行條紋樣式

jQuery 大量的運用選擇器操作DOM元素,如果要為表格建立換行條紋樣式,可以選擇使用其中的 :odd 與 :even 這兩個選擇器,前者表示選取奇數行,後者是偶數行,只要分別針對奇偶數行建立對應的樣式即可。以下是一個典型的表格,其中套用了換行條紋樣式:


列舉第一個表格的部份內容如下:

<table>
    <tr>
        <td>
            1
        </td>
        <td>
            HTML5 技術藍圖快速解構
        </td></tr><tr>
        <td>
            2
        </td>
        <td>
            建構版面 善用結構語意標籤
        </td></tr><tr>
       
    </tr>
</table>

現在建立換行樣式所需的 CSS :

.oddRow
{
    background:silver ;
}
.evenRow
{
    background:lightgray ;
}    
</style>

oddRow 類別將套用於奇數列,evenRow 類別將套用於偶數列,接下來撰寫需要的 jQuery 程式碼:

<script>
    $(document).ready(function () {
        $('tr:odd').addClass('oddRow');
        $('tr:even').addClass('evenRow');        
    });
</script>

在完成網頁載入之後,第1 行的 tr:odd 選擇器套用了 oddRow 類別,如此一來網頁中表格的奇數列均會以 oddRow 這個樣式呈現,第 2 行則是偶數列的套用。

純粹的 CSS 作法請參考 CSS 表格橫列樣式替換效果-Alternate table row


沒有留言: