先日の記事で、テーブルの何番目の行がhoverされているのかを取得する方法を紹介したので、これを応用して今回は、テーブルの選択行をハイライトさせる方法を紹介する。
まずはCodePenで書いたサンプルコードを載せておく。
See the Pen jquery-selected-row-highlight by Sakamoto Kousuke (@suckamon) on CodePen.
jQueryのhoverメソッドでは、カーソルが乗った時、外れた時とそれぞれの処理をまとめて記述できるのでこれを利用する。
まず、カーソルが乗った時の処理では、カーソルが外れた時にハイライトした行を元に戻す必要があるため、tmpColor、tmpIdxに元のプロパティを保存しておく。
tmp変数に保存した上で、選択された行に背景色を設定してハイライトさせる。
続いて、カーソルが外れた時の処理では、保存したtmp変数を元にハイライトさせた行のプロパティを元に戻している。
CodePenのResultで動作確認をすると、カーソルが乗っている行が指定した色に変わるのが分かる。
