日刊ハイテク情報誌の マガジンOFFです! 毎日IT系のニュースを 配信しています!

Javascript – テーブルの列の背景色をクリックで変えたい

概要

TODO_TIMER

jsの練習がてらtrelloみたいなプログラムを作っているのですが、tableの列の背景色をクリックで変えるロジックが思いつかなくて苦労しました。

テーブルの数が動的に変わのに対応できる状態にしておいて、選択した(選択した列が編集できる感覚)列だけ背景色を変え、なおかつ他の列をクリックしたら一個前にクリックした列の背景色をデフォルトに戻したかったです。

想定したロジック

0と1のフラグを反転させることで今の状態を判別して、背景色を変える(出来ない)

一個前の処理を取り消すことで背景色を付けたり消したりする(出来ない)

一度全てのテーブルクラスを背景色をデフォルトに戻してから、選択されている行の色を変える(出来た)

実装

 

$('.todoTable').css("background-color","#dddddd")
$(this).css("background-color","#92efec")

 

参考

テーブルの行の背景色をマウスオーバーとクリックで変える

全ソース

gitlab

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

JavaScript