【jQuery】クリックでテーブルの行をハイライトさせる。自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。この広告は、90日以上更新していないブログに表示しています。2018-01-14【jQuery】クリックでテーブルの行をハイライトさせる。プログラミング皆さん明けまして(だいぶ経ちますが)おめでとうございます。本年もまったり更新していこうと思いますので、どうぞよろしくお願い致します。2019年最初の一発目は、jQuryです!最近「勉強してください・・・」と上司にガッカリされましたorz今回は、クリックしたテーブルの行をハイライトさせてみました。ポイントはハイライトなので”1行だけ”というところです。クリックした行全ての色が変わるのを防止します。ソースコード解説ハイライトOFFハイライトONまとめソースコード今回のコードはCoffeeScriptで書いています。currentTr.addClass('selected')select-rowというクラス名のボタンをクリックすると、その行をハイライトし、もう一度クリックすると消えます。#f5f5f5;}ハイライトをする行にはclass="selected"を付け、スタイルシートでselectedにハイライト用のスタイルを適用させます。ハイライトのON/OFFはこのselectedの有無で切り替えます。解説ハイライトOFFまずは最初からハイライトを消すところまでです。読み込まれた際に一度イベントハンドラーを削除。クリックされたselect-rowの親のtrを持ってくる。selectedを削除してハイライトを解除する。今回はボタンにselect-rowをつけ、それをクリックすることでハイライトを切り替えます。スタイルを行全体につけるため、クリックした時にまずはボタンの親要素であるtrを取得します。次に、取得したtrが既にselectedを持っていたら、そのクラスを削除します。これでハイライトを解除します。ハイライトON最後にハイライトをONにする部分です。else以降を書きます。一度全trのselectedを削除する。currentTrにだけselectedを追加。currentTr.addClass('selected')currentTrへのselected追加だけだと、どこかをハイライトした状態で別の行のボタンをクリックすると、そちらの行と前にクリックした行の両方がハイライトしてしまいます。そのため、一度全部のtrからselectedを削除します。対象の行にselectedを追加。これでその行だけをハイライトすることができます。今回が初めて自分で考えて作る作業となりました。「tbody配下のtrを一つずすeachで回してselectedを調べて...」なんてjQueryの意味がない!なんてことやってました。良い勉強になりました。今年はjQueryもいっぱい勉強することになりそうです。皆さま、本年もどうぞご教授のほど、宜しくお願い致します。14:19【jQuery】クリックでテーブルの行をハイライトさせる。ー親要素で発火するイベントを特定の子孫では解除したいーこんにちは、マリンです。今回はJSでのイベントを発火させる要...2018-01-17【jQuery】要素をコピーするこんにちは、マリンです。今回は要素をコピーする方法をご紹介...2017-11-12【Rails】select_tagを使って表示内容を変えるこんにちは、マリンです。今回はselect_tagを使ってページの表...2017-04-28binって何?railsとrakeって何??(後編)こんにちは、マリンです。なんだかんだ1年経ってた。»プロフィールid:song-of-life1352607アラサーで思い立ってプログラミングを始めた主婦が、自宅でお小遣い稼ぎをしたいがために自作アプリのリリースを目指すブログです。【Git】ブランチ間違えてコミットしてた!?月別アーカイブ参加グループプログラミングはてなブログをはじめよう!song-of-life1352607さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。