透過jQuery變更奇偶欄位的樣式

要讓 Table 裡的每列資料可以根據奇偶之分來採用不同的顏色區分，如果透過 jQuery來實作，似乎比較簡單哩。

首先，先建立一個測試用的 Table。其內容如下：

< Table  id="tb"  border="1" style="border-collapse: collapse;" >
< TR class="gvh" >
< TH> School < /TH >< TH > Location </TH>
< /TR>
< TR>
< TD> NTU </TD>< TD > 台北 </TD>
< /TR>
< TR>
< TD> NTHU </TD>< TD > 新竹 </TD>
< /TR>
< TR>
< TD> NCTU </TD >< TD > 新竹 </TD>
< /TR>
< TR>
< TD> NCKU </TD >< TD > 台南 </TD>
< /TR>
< /TABLE>

接著，將我們會用到的 style 設定寫好：

< style >
        .gvh
        {
            background-color: Blue;
            font-weight: bold;
            color: Red;
            font-size: 14px;
            text-align: center;
        }
        .gvr
        {
            background-color: #EFEFEF;
     font-size: 14px;
        }
        .gva
        {
            background-color: #FFFFFF;
     font-size: 14px;
        }

< /style >

關鍵的 jQuery 控制，則如下所示：

< script >
   $(function() {         
         $("#tb tr[class!=gvh]:even").addClass("gva");
  $("#tb tr[class!=gvh]:odd").addClass("gvr");
    }); 
< /script >

由於我們一開始在原先的 Table 的第一列就把他的 TR 樣式設為 "gvh" ，所以在 jQuery 的程式碼裡，要避免去覆蓋已經設為 Header 的樣式，所以會透過屬性設定的過濾條件濾掉 class=gvh ，這樣才會讓奇偶樣式的效果正確呈現出來。

參考文章：Display different color in alternate row using jquery