jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を

jsで質問です。
displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を切り替えられるようにしたいのですが、どのようにしたら良いでしょうか。
<table><tr><td>情報１</td><td>情報２</td><td>情報３</td></tr><tr><td>情報4</td><td>情報5</td><td>情報6</td></tr></table>

No.5 ベストアンサー 回答者： fujillin 回答日時： 2024/03/19 16:15

No4です。

連投失礼。

No4は、ご質問に沿って、個別に各行を切り替える例ですが、table要素内に切替える対象が1種類だけであるなら、個別に切り替えるよりもCSSを利用する方が簡単になりますね。

スクリプトは
　event.target.closest('table')?.classList.toggle('open');
とでもしておいて、CSSで
　table tr.abc { display:none; }
　table.open tr.abc { display: table-row; }
などとすることで、親要素（=table）のクラス名の切り替えだけで済むようになります。

この回答へのお礼

色んな案をいただき、ありがとうございます。
大変助かります。

お礼日時：2024/03/19 18:15

No.4 回答者： fujillin 回答日時： 2024/03/19 15:09

No3です。

＞表示、非表示にすることはできているのですが～～
元のご質問文は、それを質問しているように読めます。
聞きたいことを質問文に書かなければ、読む人に伝わるはずもないですが・・


＞ボタン押したテーブルのクラスabcのtrだけ非表示、表示にしたいです。
No2に記したように、その手順で記述すれば良いです。
（調べる方法も併せて回答しておいたつもりですけれど・・）

Chrome、fxで確認した範囲では、以下で取得が可能です。
event.target.closest('table')?.querySelectorAll('tr.abc').forEach(e => {
e.style.display = (e.style.display=='none')?'table-row':'none';
});

ただし、ご提示の記述法では、全てのブラウザでeventオブジェクトを取得可能かどうかわかりませんので、addEventListnerなどでイベントをバインドし、第一引数でeventオブジェクトを受け取る方法にしておく方が確実です。
また、この内容は以下のご質問でNo3様が回答なさっているのと同じものです。
https://oshiete.goo.ne.jp/qa/13763802.html

No.3 回答者： fujillin 回答日時： 2024/03/19 13:34

No2です。

＞実際はtable要素は複数あります。
＞何か実現する方法はありませんでしょうか。
自分自身（あるいは親・祖先要素）に id や class名 があるならそれを利用しても良いですし、文書内での順序で識別できるならそちらでも良いです。

一定の手順で対象の要素を識別できる方法さえあれば、その手順に従って特定すれば良いでしょう。

要素の取得方法がわからないのであれば、「javascript 要素の取得」あたりをキーに検索すれば様々な方法とその説明が見つかるはずです。

この回答へのお礼

ありがとうございます。
質問の視点を変えます。表示、非表示にすることはできているのですが、要素の取得に苦戦しております。

ボタン押したテーブルのクラスabcのtrだけ非表示、表示にしたいです。
素直にクラスだけ取ると、全てに反映されてしまうため、取得方法はありませんでしょうか。


//1個目のテーブル
<table>
<tr>
<th>詳細</th>
<th>情報</th>
</tr>
<tr>
<td><span>情報1</span><button onclick="test()" type="button">詳細</button></td>
</tr>
<tr class ="abc">
<td>情報2</td>
</tr>
<tr class ="abc">
<td>情報3</td>
</tr>
</table>

//2個目のテーブル
<table>
<tr>
<th>詳細</th>
<th>情報</th>
</tr>
<tr>
<td><span>情報1</span><button onclick="test()" type="button">詳細</button></td>
</tr>
<tr class ="abc">
<td>情報2</td>
</tr>
<tr class ="abc">
<td>情報3</td>
</tr>
</table>

お礼日時：2024/03/19 14:06

No.2 回答者： fujillin 回答日時： 2024/03/19 12:55

こんにちは

非表示にしたい行（＝tr要素）を取得して、
　tr要素.style.display = 'none';
を実行すれば、その行を非表示にできます。

tr要素の取得方法は、table要素.rows[n] でも querySelector() 等でもあるいは他の方法でもお好みの方法でどうぞ。

例えば、ご提示の例で、文書中にtable要素が一つだけなら、
　document.querySelectorAll('table tr')[1]
で、2番目のtr要素を取得できます。

この回答へのお礼

回答ありがとうございます。
実際はtable要素は複数あります。
何か実現する方法はありませんでしょうか。

お礼日時：2024/03/19 13:12

No.1 回答者： fadklsj 回答日時： 2024/03/19 10:23

HTML

<table>
<tr>
<td>情報1</td>
<td>情報2</td>
<td>情報3</td>
</tr>
<tr id="target-row-1">
<td>情報4</td>
<td>情報5</td>
<td>情報6</td>
</tr>
</table>

<button id="toggle-button">表示/非表示</button>

この回答へのお礼

ありがとうございます。
これで折りたたてる感じなのでしょうか。
jsの記載がありませんが

お礼日時：2024/03/19 11:49