sukechan.net

テーブルの背景色を 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 開発を単純化する

このブログでは、私 yusuke が気になった Web 技術の情報を中心に扱っていく予定です。

去年 Ajax にハマり、今年中に Web サービスを公開しようと思っています。
自分の勉強も兼ねて、Ajax のサンプルもこのブログを使って公開していきます。

ここで、私 yusuke について簡単に自己紹介しておきます。

静岡の片隅で社内 SE 兼プログラマをしている 20 代の男です。
Web 技術全般が大好きです。生粋の Mac ユーザでもあります。

では、よろしくお願いします。