TABLE行の交互配色

スクリプト・ファイル名

table.js

実行関数名

AB_AlternateRows()

機能

テーブルの行の色を自動的に交互に配色します。

行数の多いテーブルで、後に行の挿入をする可能性がある場合などに利用価値があると思います。

サンプル

くだもの単価数量小計
合計122750
りんご1003300
みかん505250
メロン50021000
すいか100011000
バナナ2001200

使い方

構文

AB_AlternateRows('id')

AB_AlternateRows('id1','id2',...)

解説

関数の引数には効果を適用したいtable要素のidを指定します。

カンマidを区切ることで、複数のtable要素を指定できます。

実行はbody要素のonloadイベントで呼び出すのが一般的でしょう。勿論上記サンプルのようにform要素やa要素で呼び出すことも出来ます。

<body onload="AB_AlternateRows('fruits')">

効果を適用したいtable要素にはid属性を設定しておく必要があります。

<table id="fruits">

奇数行、偶数行各々のスタイルをCSSで設定します。

スクリプトは指定されたtable要素の奇数番目のtr要素のclass属性をoddに、偶数番目のtr要素のclass属性をevenに変更します。

odd, even各々に違ったプロパティを設定しておくことで、交互に行の色が変わるという仕組です。

tr.odd { background-color:#ffc }

tr.even { background-color:#ccf }

指定されたtable中のtr要素は全てスクリプト中での対象になります。よって、サンプルのようにthead要素やtfoot要素を配置している場合、これらの要素中のtr要素に対してもスクリプトの効果は適用されます。

これらのtr要素のスタイルを変更させたくない場合には、CSSセレクタを適切に設定しておけばよいでしょう。

例えば上記のスタイル指定の後に次の記述を加えることで、thead, tfoot要素中のtr要素に対するスタイルは上書きされるので、スクリプトによりスタイルを変更されずにすみます。

thead tr, tfoot tr { background-color:#fcc }

あるいは次のようにtbody要素中のtr要素というように限定したセレクタ指定もできます。

tbody tr.odd { background-color:#ffc }

tbody tr.even { background-color:#ccf }

しかし、thead要素やtfoot要素を配置している場合、これらの要素中のtr要素の数によって、tbody要素中のtr要素の奇数番目、偶数番目の判断が正確に出来ません。

例えば1つのtr要素を含むthead要素とtbody要素を配置した(tfoot要素はナシ)場合、tbody要素の最初のtr要素はこのtable要素中では2番目なので偶数と判断してしまいます。

単に交互に配色されればよい場合には、このことについて気にする必要はありませんが、厳密に奇数、偶数を判断させたい場合には、スクリプトの引数にtableid属性ではなく、tbodyid属性を指定します。

<body onload="AB_AlternateRows('fruits-body')">

ブラウザの対応

本スクリプトでは DOM関数を使用していますので、これに対応している必要がありますが、現行のブラウザであればほぼ動作すると思います。

Netscape 7.0 (Mac)
Netscape 7.1 (Mac OS X)
Netscape 7.1 (Win)
Mozilla 1.4 (Mac OS X)
InternetExplorer 5.x (Mac)
InternetExplorer 6.0 (Win)
Safari (Mac OS X)

Mac版のIEはJavaScriptとしては正常に動作しますが、CSSの実装がおかしく、tfoot要素を配置していると適切にスタイル適用が行なわれません。

捕捉

スクリプトが動作しない場合を想定して、デフォルトの属性を適切に設定しておきましょう。

上記のサンプルではtr要素のbackground-colorプロパティを利用する方法を紹介しましたが、セレクタを組み合わせることで、もっと細かい設定ができますので、チャレンジしてみて下さい。