jQuery でテーブルの背景色を 1 行置きに変更する

テーブルの背景色を 1 行置きに変更して、より見やすくする表示方法をみかけます。
HTML タグ内の tr タグに class 属性をつけていく方法でも良いのですが、行数が多くなるととても面倒ですので、最近では JavaScript で実装するケースが多いと思います。

今回はそれを jQuery を使って実現してみます。

まず、テーブルに class 属性を付けておきます。今回のクラス名は “stripe” としました。

jQuery を使わずにやってみる

jQuery を使う前に、まず jQuery を使わない場合を見てみましょう。
おそらく、下記のようなスクリプトになると思います。

window.onload = function() {
  var tbl = document.getElementsByTagName("table");
  for (var i = 0; i < tbl.length; i++) {
    if (tbl[i].className == "stripe") {
      stripeTable(tbl[i]);
    }
  }
}

function stripeTable(t) {
  for (var i = 0; i < t.rows.length; i++) {
    if ( i % 2 == 0) { t.rows[i].className = "even" }
  }
}

jQuery を使うとどうなるか？

まず、jQuery では window.onload の代わりに $() を使います。
window.onload ではページ内のすべてのファイルの読み込みが完了してから実行されますが、 $() では DOM 解析が完了した時点で実行できるのが特徴です。

では、先ほどのスクリプトを jQuery を使って書いてみます。

$(function() {
	$(".stripe tr:even").addClass("even");
});

たったこれだけです！
$ 関数の中では、stripe クラスを持つ要素内の tr 要素のうち、偶数番目の要素に even クラスを追加するということをしています。

jQuery を使い始めてまだ日が浅いですが、jQuery はすごく便利だなぁと実感しています。

>>作成したサンプルはこちら

参考サイト

• jQuery リファレンス
• jQuery 開発者向けメモ
• jQuery を使って Ajax 開発を単純化する

関連する記事

• jQuery.data() について
• 連続するページの JSONP を取得して最後に Callback 関数を呼ぶライブラリ
• 短縮 URL を展開する Greasemonkey
• 相手に Follow されてるかどうかを表示するグリモン
• マク語に変換する bookmarklet