質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5997閲覧

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

kmrn

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/04 09:37

編集2021/05/04 09:38

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

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

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

JavaScript

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

css

1.switch { 2 background-color: #f00; 3 display: none; 4} 5td.active { 6 display: table-cell; 7}

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/04 09:59

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

2021/05/04 11:28

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

回答2

0

ベストアンサー

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

HTML

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

show.css

CSS

1.switch { 2 display: table-cell; 3}

hide.css

CSS

1.switch { 2 display: none; 3}

.switchセルを表示するには

JavaScript

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

非表示にするには

JavaScript

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

投稿2021/05/04 10:34

itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/04 10:42 編集

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

2021/05/04 11:30

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

0

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

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

css

1td.switch { 2 background-color: #f00; 3 display: none; 4} 5 6table.active td.switch{ 7 display: table-cell; 8}

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

投稿2021/05/04 09:54

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kmrn

2021/05/04 11:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問