変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

table

[HTML]table クリックのエコー

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の生成タイミングが判らず諦めた。


  • カテゴリー:
  • HTML


top