javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし

解決済

質問者：piraniaman
質問日時：2024/03/21 11:18
回答数：3件

javascriptで質問です。
displayプロパティを使用してテーブルの一部を表示・非表示をしたいのですが、設定したい要素をうまく取得することができません。

ボタン押下したclass testのtableのtrにclass testにtr要素.style.display = 'none'や'block'を設定してボタンで切り替えれるようにしたいのですが、うまく設定したい要素を取得できません。

ボタンを押下した、テーブルのclass testだけの要素を取得する方法はないでしょうか。

どうかお助けください。

//テーブル1
<table>
<tr>
<th>情報１</th>
<th>情報２</th>
</tr>
<tr>
<td>値1<button onclick="test()" type="button">詳細</button></td>
<td>値2</td>
</tr>
<tr class="test">
<td>値3</td>
<td>値4</td>
</tr>

</table>
//テーブル2
<table>
<tr>
<th>情報１</th>
<th>情報２</th>
</tr>
<tr>
<td>値1<button onclick="test()" type="button">詳細</button></td>
<td>値2</td>
</tr>
<tr class="test">
<td>値3</td>
<td>値4</td>
</tr>
<tr>
<td>値3</td>
<td>値4</td>
</tr>
</table>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： bx2
回答日時：2024/03/21 16:52

先の回答を見たら、もっと簡単に書く方法がありました。

$(obj).closest('tbody').find('tr.test').toggle();

または

obj.closest('tbody').querySelectorAll('tr.test').forEach(function(e){
e.style.display = (e.style.display == 'none') ? 'table-row' : 'none';
});

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。こちらの書き方でもうまくいきました。大変助かります。

通報する

お礼日時：2024/03/21 18:34

No.2

回答者： bx2
回答日時：2024/03/21 12:22

jQuery を使用すると簡単に書けます。

<html>
<head>
<script src="https ://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function test(obj){
$(obj).parent().parent().parent().find('tr.test').toggle();

/* jQuery を使用しない場合（他者の回答を一部流用）
obj.parentNode.parentNode.parentNode.querySelectorAll('tr.test').forEach(function(e){
e.style.display = (e.style.display == 'none') ? 'table-row' : 'none';
});
*/
}
</script>
</head>
<body>

//テーブル1
<table>
<tr>
<th>情報１</th>
<th>情報２</th>
</tr>
<tr>
<td>値1<button onclick="test(this)" type="button">詳細</button></td>
<td>値2</td>
</tr>
<tr class="test">
<td>値3</td>
<td>値4</td>
</tr>

</table>
//テーブル2
<table>
<tr>
<th>情報１</th>
<th>情報２</th>
</tr>
<tr>
<td>値1<button onclick="test(this)" type="button">詳細</button></td>
<td>値2</td>
</tr>
<tr class="test">
<td>値3</td>
<td>値4</td>
</tr>
<tr>
<td>値3</td>
<td>値4</td>
</tr>
</table>

</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。大変助かりました。

通報する

お礼日時：2024/03/21 16:06

No.1

回答者： fujillin
回答日時：2024/03/21 12:11

こんにちは

先日の回答の方法ではダメという事でしょうか？
https://oshiete.goo.ne.jp/qa/13764428.html

ダメな場合は、上記のNo3にも記した通りですが・・
addEventListner でイベント処理を設定する方法にすれば、
確実に第一引数でイベントオブジェクトを取得できるように
なるはずです。