【jQuery】クリックでテーブルの行をハイライトさせる。

皆さん明けまして（だいぶ経ちますが）おめでとうございます。

本年もまったり更新していこうと思いますので、どうぞよろしくお願い致します。


さて、2019年最初の一発目は、

jQuryです！

最近「勉強してください・・・」と上司にガッカリされましたorz

今回は、クリックしたテーブルの行をハイライトさせてみました。

ポイントはハイライトなので”1行だけ”というところです。

クリックした行全ての色が変わるのを防止します。

ソースコード

今回のコードはCoffeeScriptで書いています。

（基本Railsで書いてるので...）

highlightRow: ->
    $('.select-row').off 'click'
    $('.select-row').on 'click', () ->
        currentTr = $(@).parents('tr')
        if currentTr.hasClass('selected')
            currentTr.removeClass('selected')
        else
            $('tbody>tr').removeClass('selected')
            currentTr.addClass('selected')

select-rowというクラス名のボタンをクリックすると、

その行をハイライトし、もう一度クリックすると消えます。

// ハイライト用のスタイル
.selected {
　background-color: #f5f5f5;
}

ハイライトをする行にはclass="selected"を付け、

スタイルシートでselectedにハイライト用のスタイルを適用させます。

ハイライトのON/OFFはこのselectedの有無で切り替えます。

解説

ハイライトOFF

まずは最初からハイライトを消すところまでです。

// 読み込まれた際に一度イベントハンドラーを削除。
$('.select-row').off 'click'

$('.select-row').on 'click', () ->
    // クリックされたselect-rowの親のtrを持ってくる。
    currentTr = $(@).parents('tr')
    // 親のtrが既にselectedを持っていたら（ハイライト状態なら）
    if currentTr.hasClass('selected')
        // selectedを削除してハイライトを解除する。
        currentTr.removeClass('selected')
    else
        // ハイライト用

今回はボタンにselect-rowをつけ、それをクリックすることでハイライトを切り替えます。

なのでスタイルを行全体につけるため、

クリックした時にまずはボタンの親要素であるtrを取得します。


次に、取得したtrが既にselectedを持っていたら、

そのクラスを削除します。

これでハイライトを解除します。

ハイライトON

最後にハイライトをONにする部分です。

else以降を書きます。

　.
　.
　.
　else
　　// 一度全trのselectedを削除する。
　　$('tbody > tr').removeClass('selected')
　　// currentTrにだけselectedを追加。（ハイライト）
　   currentTr.addClass('selected')

currentTrへのselected追加だけだと、

どこかをハイライトした状態で別の行のボタンをクリックすると、

そちらの行と前にクリックした行の両方がハイライトしてしまいます。

そのため、一度全部のtrからselectedを削除します。


改めて対象の行にselectedを追加。

これでその行だけをハイライトすることができます。

まとめ

今まで人の書いたものを真似するだけでしたが、

今回が初めて自分で考えて作る作業となりました。

最初は「全部のtrからクラスを削除する」ことをしなかったために、

クリックした行全てがハイライトされてしまったり、

$('tbody > tr')のセレクターの取り方をせず、

「tbody配下のtrを一つずすeachで回してselectedを調べて...」

なんてjQueryの意味がない！なんてことやってました。

結局上司の助言をいただいて完成した形になりましたが、

良い勉強になりました。

今年はjQueryもいっぱい勉強することになりそうです。

皆さま、本年もどうぞご教授のほど、宜しくお願い致します。