HTMLの表をクリックした時に行選択状態にするには、チェックボックスのchecked やリンクのselectedの属性を使う方法もあったが、昔のブラウザならどんな属性も自由に付けられるからtrタグにcheckedするのもいいけど、変な使い方は無視するのが御時世なので、trタグに行選択クラスを加えるのが安心。
その為には、cssとjavascriptを少し書かないといけない。
注意点としては、
- 表の背景色を一行ごとに変えてる場合はnth-child(…)の方が優先度が高いらしい。
- 選択状態クラスの背景色に !import して優先度を変える。
- thやtdで文字や背景の色を指定していると、trで色を変えても無関係で無視されてしまう。
かな。
なので、 ちと面倒だけど、thやtdにも 選択状態クラスを入れれば良い。
但し、javascriptの for .. in は、childNodes の要素の識別子（数値）を含むプロパティ名（文字列）を返してくるので、!isNaNでフィルターしないといけないし。childNodesには行中のスペース等のテキスト要素も含まれているので、classListプロパティがあるものだけ処理しないとエラってしまうから、配列でのfor..inは非推奨でfor..ofがお勧めとなっている。
こんな感じかな。
※ちと大変と書いておいて、6行しか増えてないなぁ。
window.onload = function () {
var tables = document.querySelectorAll("table");
let addClassElement = null;
for (var table of tables) {
table.addEventListener('click', (event) => {
var tr = event.target.parentElement;
// 前回設定したものを回復
if (addClassElement!=null) {
addClassElement.toggleClassNameWithChilds('selected01');
addClassElement = null;
}
// 行選択クラスをトグる
addClassElement = tr.toggleClassNameWithChilds('selected01');
}, false);
}
}
// 指定クラスをトグる
if(!HTMLElement.prototype.toggleClassNameWithChilds) {
HTMLElement.prototype.toggleClassNameWithChilds = function(className) {
var addClassElement = null;
if (this === undefined || this.classList === undefined) {
return null;
}
if (!this.classList.contains(className)) {
addClassElement = this;
}
this.classList.toggle(className);
//配下のオブジェクトも反映
for (var ch of this.childNodes) {
// 未実装なオブジェクトを除外
if(ch.toggleClassNameWithChilds !== undefined) {
ch.toggleClassNameWithChilds(className);
}
}
return addClassElement;
}
}tr:nth-child(even) {
background-color: white;
}
tr:nth-child(odd) {
background-color: lavender;
}
.selected01 {
color: white;
background-color: gray;
}
Element.classListにtoggleWithChildsとかを追加しようとしたけど、classListの生成タイミングが判らず諦めた。