Schwarz Lanzenreiter forward

Table Color Changer

テーブル・セルの背景色や文字色を変える

IE4+, NN6+


TableColorChanger 2公開中。 このページは削除される予定です。[ 2005-09/03 ]


  1. テーブルの背景色を毎行変えるスクリプト
  2. マウスが乗った行の背景色を変えるスクリプト
  3. クリックされたセルの背景色を変えるスクリプト
  4. 以上3つを適用させたサンプル

一行ずつテーブルの背景色を変える

大きなテーブルなどは得てして見難いもの。 そこで毎行背景色を変え、更に数行毎にも区切りとして背景色を変えることで データを見やすくしようと考えるものの、後から属性の追加や修正というのは かなりの作業になってしまいます。そこで JavaScript が登場するわけです。

以下のサンプルでは 一行おきに少し背景色を濃くし、10行毎に更に濃い色にしています。 更に左から4列目と9列目には別の色を適用させることで 閲覧者の目がテーブル内のデータを追いかけやすくしています。 (あくまでもサンプル用の配色なので環境によっては分かり難いかもしれません。あしからず)

tableColorChanger.js [ DownLoad ]

マウスが乗った行の背景色を変える

これも大きなテーブル用で、現在参照している行にマウスカーソルが乗ったとき その行の背景色を変えることで閲覧性が向上することが期待できます。

trColorChanger.js [ DownLoad ]

クリックされたセルの背景色を変える

セルがクリックされた時に背景色を変え強調させることで 後から再度参照する時などすぐに目的のデータ等を見つけられるようし ストレスを軽減させます。

cellColorChanger.js [ DownLoad ]

3つを全てを使ったサンプル

[PageTop]


[PageTop] [Back] [Home]

Copyright(C) 2002-2005 kerry