TABLEの特定列をJSで高速に表示、非表示を切り替えたい

Question

テーブルの特定列に対して、ボタンをクリックした際に、
表示、非表示をJavaScriptで切り替えるようにしたいのですが、
セルの数が多いせいか私が作ったコードだと表示の切替に時間がかかり、
高速で表示、非表示を切り替える方法を探しています。

現在の実装は、切替対象のセルにあらかじめクラス(switch)を設定しておき、
ボタンをクリックした際にswitchクラスが設定されたtdタグに対して、
表示用のクラス(active)を追加しています。
CSSでactiveクラスがある場合、セルを表示するようにしています。

今の実装はループで1個ずつクラスを足しているのも遅い要因かと考えているのですが、
まとめてクラスを足すということは可能なのでしょうか。

const classList = document.getElementsByClassName("switch");
for (let i = 0; i < classList.length; i++) {
    classList.item(i).classList.toggle('active');
}

.switch {
    background-color: #f00;
    display: none;
}
td.active {
    display: table-cell;
}

JSFiddleに作ったサンプルです。
https://jsfiddle.net/q015mu3v/

Comments

[m.ts10806]

JavaScriptで要素を作っているのも１つではないかと。
結構パフォーマンスに影響あります。

[kmrn]

説明不足ですみません。実際のタグを作るのはPHPになります。
今回はサンプルなのでJSで作ってました。

Answer 1

こういう手もあります。秒で切り替わります。

<link rel="stylesheet" href="show.css" id="show">
<link rel="stylesheet" href="hide.css" id="hide">

show.css

.switch {
    display: table-cell;
}

hide.css

.switch {
    display: none;
}

.switchセルを表示するには

  document.getElementById('show').disabled = false;
  document.getElementById('hide').disabled = true;

非表示にするには

  document.getElementById('show').disabled = true;
  document.getElementById('hide').disabled = false;

Comments

[m.ts10806]

私も似たような手を昔職場の先輩に教えてもらって「こんなやり方もあるのか」と驚愕したことがあります＋１

[kmrn]

ありがとうございます。
CSS自体を切り替えるという発想はありませんでした。
これなら確かに高速に切り替えられそうです。

Answer 2

まとめてクラスを足すということは可能なのでしょうか。

クラスを付け替えるのをテーブル1つにする方法もあります。

td.switch {
    background-color: #f00;
    display: none;
}

table.active td.switch{
    display: table-cell;
}

こうすれば、<table>にactiveを付け外しする1回の動作で済みます。

Comments

[kmrn]

ありがとうございます。参考にさせていただきます。