サンプルはこちら。
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」クラスを付与します。