« 5年目突入〜ッ! | トップページ | カメラ »

2009.04.08

テーブルの背景色を1行おきに変更してみる

今作成している案件で、結構ボリュームのある一覧表を載せるページがありまして…。
縦に長い表だと、視認性を上げるために1行おきに背景色を変更するなんてコトも常套手段となる訳です。

これまでは手作業で、tr要素にclass指定をして、CSSで背景色を変更したりしていたんですが、この方法だと表の途中で追加したり、削除したりという修正がとても手間…というか、ほとんどやり直しになってしまいます。
Javascriptを使えば、何か手軽な方法があるんだろうなぁとは思っていたモノの、なかなか必要に迫られずにサボっていました。

前置きが長くなりましたが、
調べた所、jQueryを使えばとても簡単だ!というコトが分かり、紹介してみます。
参考にしたのは、「sukechan.net」さんの「jQuery でテーブルの背景色を 1 行置きに変更する」というページです。

まず、jQueryから最新のスクリプトをダウンロードして下さい。
HTMLソースにスクリプトを読み込み、下記のように記述
(例)
<script type="text/javascript"><!--
$(function() {
    $(".stripe tr:even").addClass("even");
});
//--></script>

次に適用するtable要素にstripeとclass指定して、
CSSで例えば、
.stripe .even td {
    background-color: #FBF8EE;
}
と、定義してみて下さい。

これで勝手に偶数行のtd要素の背景色が変更できます。項目の並びが変更されようが、追加・削除されようが全然OKです。
さらに、table要素に限らず、li要素などにも応用できます!

…んっ!?
もしかして、プログラムから生成するようなtable要素にも応用できるかも?
今度実験してみます。

|

« 5年目突入〜ッ! | トップページ | カメラ »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/44607398

この記事へのトラックバック一覧です: テーブルの背景色を1行おきに変更してみる:

« 5年目突入〜ッ! | トップページ | カメラ »