- 2008-02-02 (土) 23:00
- jQuery
テーブルの背景色を 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 はすごく便利だなぁと実感しています。
参考サイト
関連する記事
- Newer: さくらインターネットに WordPress をインストール (1)
- Older: ブログはじめました
Comments:0
Trackbacks:2
- Trackback URL for this entry
- http://www.sukechan.net/archives/3/trackback/
- Listed below are links to weblogs that reference
- jQuery でテーブルの背景色を 1 行置きに変更する from sukechan.net
- pingback from CodeIgniter - しがない脳打つ開発者 09-02-10 (火) 14:46
-
[...] jQuery でテーブルの背景色を 1 行置きに変更する カテゴリー: CodeIgniter — admin 3:10 PM トラックバック [...]
- pingback from another side of view » Blog Archive » jQuery でテーブルの背景色を 1 行置きに変更する 11-03-19 (土) 21:48
-
[...] jQuery でテーブルの背景色を 1 行置きに変更する [...]

