javascriptで質問です。
displayプロパティを使用してテーブルの一部を表示・非表示をしたいのですが、設定したい要素をうまく取得することができません。
ボタン押下したclass testのtableのtrにclass testにtr要素.style.display = 'none'や'block'を設定してボタンで切り替えれるようにしたいのですが、うまく設定したい要素を取得できません。
ボタンを押下した、テーブルのclass testだけの要素を取得する方法はないでしょうか。
どうかお助けください。
//テーブル1
<table>
<tr>
<th>情報1</th>
<th>情報2</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>情報1</th>
<th>情報2</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>
No.3ベストアンサー
- 回答日時:
先の回答を見たら、もっと簡単に書く方法がありました。
$(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';
});
No.2
- 回答日時:
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>情報1</th>
<th>情報2</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>情報1</th>
<th>情報2</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>
No.1
- 回答日時:
こんにちは
先日の回答の方法ではダメという事でしょうか?
https://oshiete.goo.ne.jp/qa/13764428.html
ダメな場合は、上記のNo3にも記した通りですが・・
addEventListner でイベント処理を設定する方法にすれば、
確実に第一引数でイベントオブジェクトを取得できるように
なるはずです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を 5 2024/03/19 10:18
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ 3 2024/03/18 14:47
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS pythonのコードについてご教示ください 1 2024/01/14 05:39
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlのエラーについて(デバッグ) 1 2023/11/13 20:54
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
動的なtableの値を取得したい
-
Excelで作ったhtmlファイルのサ...
-
テーブルの変数について
-
COBOLで作ったテキストファイル...
-
【UWSC】HTML内のある部分を抽...
-
ブルダウン選択でページの表示...
-
クリックされた罫表セルの行番...
-
至急!GetElementById でtdの...
-
dataTablesのテーブルの内容が...
-
JSで、テーブルのある行のみ、...
-
javascriptで表のます目と画像...
-
Tablesorteを2行一組でソートする
-
return trueとreturn falseの用...
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
ボタンを押すとチェックボック...
-
【jQuery】input nameの文字列...
-
Selectの中身をfor文で入れる
-
確認ダイアログの出し方(JavaS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
クリックされた罫表セルの行番...
-
tableの任意行にfocusをあてる
-
javascript クリックすると、あ...
-
チェックボックスにチェックが...
-
マウスをブラウザの外に出した...
-
ブルダウン選択でページの表示...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
動的なtableの値を取得したい
-
ツールチップにテーブル左端列...
-
【UWSC】HTML内のある部分を抽...
-
別ページからOnclickでテーブル...
-
【JQuery】テーブルで行選択さ...
-
JSで、テーブルのある行のみ、...
おすすめ情報
