jQueryでマウスオーバーしたテーブル行(tr要素)をハイライトさせる方法

2012.3.13

仕事ですごく縦長の表を作ることになり、似たような内容が並ぶため、今自分がどこを見ているのかが分からなくなる事があったので実装した時のメモ。

確認環境

• jQuery1.7.1

htmlコード

以下のようなテーブルがあるとします。jQueryの読み込みなどは省略していますので、適宜記述してください。

    見出し
    見出し
    見出し


    内容
    内容
    内容


    内容
    内容
    内容

jQueryコード

jQueryでは、対象となるtr要素をマウスオーバーしたら、trにクラスhvを振り、マウスアウトしたらhvを削除するという、シンプルなコードです。

CSSコード

jQueryによって追加されたhvクラスを基準に、そのtd要素の色を薄ピンクに変更します。

th要素に反応すると具合が悪いので、こういう書き方になります。

table.hoge tr.hv td {
    background-color: #fff4f8;
}