クリックしたセルの列と行を色分け

テーブルのセルをクリックした時に、同一の列・行のセルを色分けする。

デモページを表示

CSS

補足

• 20行目：クリックしたセルと同一の行・列のセル仕様を設定。
• 24行目：クリックしたセルの仕様を設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• クリックできるのは td 要素のみとしている（th 要素は対象外）。
• 色分けする同一行・列のセルも td 要素のみとしている（th 要素は対象外）。
• クリックされたセルを再度クリックすると色分けが解除される。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• table要素に crosshair クラスを指定する。