マウスオーバーで行や列のセルの色を変える(ハイライトする)

動くサンプルはこちら。マウスオーバーしている際に、その行や列のセルの色を変えるサンプルを見てみます。カレンダーやスケジュール管理のテーブルなどで役立つでしょうか。以下、仕様と要件です

  • 行と列の両方に色付けする。
  • 行は、CSSのみで対応する。
  • ヘッダー行(th)は、色付けしない。
  • マウスオーバーしているセルは、少し色を濃くする。
  • 無駄にイベントを設定しない。

ということで、以下コードです。

最初に関数(イベントハンドラ)を定義して、最後にイベントを設定しています。イベントの設定では、イベント委譲の仕組みを利用しました。table要素にイベントを設定して、そのtable要素が、td要素(第2引数)のイベントを監視するタイプです。これで、大量にあるかも知れないtd要素1つ1つにイベントを設定するのではなく、table要素だけにイベント設定するだけで済みます。イベントは、半角空白で区切り、mouseenterとmouseleaveの2タイプに設定しています。(この2つが初耳の方は、取り敢えず、mouseoverとmouseoutより少しいい版と考えて下さい).hover()メソッドを使うという選択肢もありましたが、ここではそれは使わず、1つのイベントハンドラ内で、その2つを区別することにしました。

そして、イベントハンドラのtableColor関数の最初の変数定義 idx = $(this).index() + 1 では、マウスオーバーされているセルの「列番号」を取得しています。.index()の使い方には、3タイプありますが、こうすることで、自分が何番目の兄弟かを取得できます。trが親になります。0スタートで取得されるため、+ 1 して、1スタートに変換しています。今回の例では、1~5の範囲になります。その次の行では、その取得した列番号を利用して、マウスオーバーしている列と同じ列にあるtd要素全てを選択しています。

続けて、イベントのタイプが、mouseenterかそれ以外(mouseleave)かで条件分岐して、同じ列のtd要素及び自分自身にクラス名を付けたり外したりして、色を付けたり外したりしています。以上で終了です。

CSSで背景色を管理するメリットは、もちろんデザイナが管理し易いというのもありますが、もしJSで管理するとした場合でマウスアウトで元々セルに付いていた色を復元したい場合、その元の色を保存しておかないといけないことです。これは少し手間が掛かります。その点、CSSでやってしまえば、クラスの着脱だけで済むので、楽でいいです。色の優先度指定も、CSSの方で管理できますし。

なお、このサンプルでは、thに対して、CSSで優先的に背景色を付けています。もしこれが無いと、マウスオーバーで、thに行の背景色が付くことになります(tr:hoverがある為)。また、CSSの:hover擬似クラスは、IE6では非対応なので、このサンプルは、IE6では行に色が付きません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です