jQuery利用例：偶数行の自動判別

サンプルはこちら。
http://jsdo.it/goto_jp/9yGi

jQuery(及びJavaScript)を使うのは特殊な動作をするためのものと思われがちですが、UI表現の効率化に利用することもできます。

HTML

<table class="dataTable">
  <tr>
    <th>セル1</th>
    <th>セル2</th>
    <th>セル3</th>
    <th>セル4</th>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
～
</table>

何の変哲もないテーブルです。クラス「dataTable」を付与しています。
CSSは動作に関係ないのと長くなるので割愛します。サンプル側のjsdo.itのソースをご覧ください。

JavaScript

$(function(){
    $(".dataTable tr:even").each(function(){
        $(this).addClass("even");
    });
});

何のイベントも指定していないので画面ロード時すぐに実行されます。

2行目で「dataTable」の「偶数行のtr」を対象にeachを使ってループさせています。
3行目で合致した対象へ「even」クラスを付与します。