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も見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を
JavaScript
-
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
HTMLで作った時報アプリが動きません
JavaScript
-
-
4
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
5
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
6
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
7
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
8
PHPでこのコード自体に意味は無いんですけど、上のifと下のifの違いってなんですか?個人的には下の
PHP
-
9
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
10
Cookieに保存されない
JavaScript
-
11
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
12
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
13
disabled プロパティが表示されない原因が分からない
JavaScript
-
14
ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します
JavaScript
-
15
Javascriptエラーの原因が分からない
JavaScript
-
16
JavascriptのHTMLクラス表示について
JavaScript
-
17
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
18
CSSデータの作成方法について(FTP内)
HTML・CSS
-
19
システムエンジニアの適正について
C言語・C++・C#
-
20
awsにApacheとPHPを入れて、何故か画面が500エラーで表示できません! それに、ログファイ
PHP
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
一覧から選択した行の行番号を...
-
【JQuery】テーブルで行選択さ...
-
jqueryで表に連番No.を追加したい
-
スクロールバーの表示位置を変...
-
リンク色の変更
-
プルダウンで選択すると、DBの...
-
FireFoxでborder-collapseを使...
-
JavaScriptで特定のtdタグにcla...
-
tableの任意行にfocusをあてる
-
階層式メニューをtableタグ内に
-
特定<table>内の<td>の色を変える
-
テーブルの変数について
-
至急!GetElementById でtdの...
-
JavaScriptでテーブルの行入れ替え
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
onClickとsubmitの処理順序
-
【jQuery】input nameの文字列...
-
onchangeイベントを強制的に発...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報