jQuery日本語リファレンス

一行おきにテーブル行の色を変える

テーブルの行ごとに縞々に色を変えるには、奇数/偶数を取得するセレクターを使います。

駅	ワンルーム	1K・1DK	1LDK・2K・2DK	2LDK・3K・3DK	3LDK・4K・4DK
森下	8.41	8.88	12.87	15.78	19.24
清澄白河	8.19	9.94	12.39	15.73	21.33
門前仲町	9.89	9.96	14.29	19.61	17.42
月島	11.19	10.12	17.38	23.54	37.83
勝どき	13.18	13.88	19.01	28.24	34.96
築地市場	-	-	20.88	-	-
汐留	15.03	16.82	27.56	51.14	-

HOME'S賃貸 家賃相場 2008/03/28のデータより

$(document).ready(function(){
  // 偶数行の色を設定
  $('table#stripe-table tr:even').css('background-color', '#666');
  // 奇数行の色を設定
  $('table#stripe-table tr:odd').css('background-color', '#333');
});

ここでは直接背景色を指定していますが、addClassなどを使って事前に定義されたスタイルを充てる方が、より実践的でしょう。

$(document).ready(function(){
  // 偶数行にのみクラスを指定
  $('table#stripe-table tr:even').addClass('even-row');
});