No.5ベストアンサー
- 回答日時:
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)のクラス名の切り替えだけで済むようになります。
No.4
- 回答日時:
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
- 回答日時:
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>
No.2
- 回答日時:
こんにちは
非表示にしたい行(=tr要素)を取得して、
tr要素.style.display = 'none';
を実行すれば、その行を非表示にできます。
tr要素の取得方法は、table要素.rows[n] でも querySelector() 等でもあるいは他の方法でもお好みの方法でどうぞ。
例えば、ご提示の例で、文書中にtable要素が一つだけなら、
document.querySelectorAll('table tr')[1]
で、2番目のtr要素を取得できます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS pythonのコードについてご教示ください 1 2024/01/14 05:39
- PHP htmlのエラーについて(デバッグ) 1 2023/11/13 20:54
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし
JavaScript
-
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
-
4
PHPでこのコード自体に意味は無いんですけど、上のifと下のifの違いってなんですか?個人的には下の
PHP
-
5
Javascriptエラーの原因が分からない
JavaScript
-
6
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
7
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
8
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
9
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトする
HTML・CSS
-
10
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
11
40代後半でゼロからのプログラム業界への転職
その他(プログラミング・Web制作)
-
12
WEBサイトの作成で、imgタグには現在もwidthとheightの指定が推奨ですか?
HTML・CSS
-
13
HTMLで作った時報アプリが動きません
JavaScript
-
14
JavascriptのHTMLクラス表示について
JavaScript
-
15
CSSデータの作成方法について(FTP内)
HTML・CSS
-
16
システムエンジニアの適正について
C言語・C++・C#
-
17
awsにApacheとPHPを入れて、何故か画面が500エラーで表示できません! それに、ログファイ
PHP
-
18
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
19
htmlソース文の 各行 改行位置や行頭位置 タグがばらっばらになるのはどうして?
HTML・CSS
-
20
Webサイト内に埋め込んだmp4動画内にリンクを設定したい
その他(プログラミング・Web制作)
関連するカテゴリから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・・・と...
おすすめ情報