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も見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし
JavaScript
-
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
-
4
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
5
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
6
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
7
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトする
HTML・CSS
-
8
Javascriptエラーの原因が分からない
JavaScript
-
9
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
10
システムエンジニアの適正について
C言語・C++・C#
-
11
iOSのみダブルタップが必要
JavaScript
-
12
CSSデータの作成方法について(FTP内)
HTML・CSS
-
13
awsにApacheとPHPを入れて、何故か画面が500エラーで表示できません! それに、ログファイ
PHP
-
14
htmlソース文の 各行 改行位置や行頭位置 タグがばらっばらになるのはどうして?
HTML・CSS
-
15
Webサイト内に埋め込んだmp4動画内にリンクを設定したい
その他(プログラミング・Web制作)
-
16
web制作をしているのですが、ページ内リンクを押すとidを指定しているブロックより上の方に飛んでしま
HTML・CSS
-
17
HTMLのbody内に<style>~</style>定義は作法的にOKでしょうか?
HTML・CSS
-
18
ホームページの事でおしえてください
CGI
-
19
WordPressで画面還移なしの掲示板を作成する方法が分かりませんアドバイスお願い致します。
AJAX
-
20
htmlの修正方法を教えていただきたいです。
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの変数について
-
一覧から選択した行の行番号を...
-
テーブルで複数行をまとめて非...
-
ハイパーリンクを別ウインドウ...
-
tableの任意行にfocusをあてる
-
何番目のクラスか取得するには
-
JavaScriptでテーブルをクリッ...
-
【JQuery】テーブルで行選択さ...
-
リンク色の変更
-
JavaScriptで特定のtdタグにcla...
-
テーブルの項目の値取得
-
特定<table>内の<td>の色を変える
-
jqueryでどうやってエスケープ?
-
ドラッグ&ドロップしたらその...
-
jquery datatablesを使用 イン...
-
dataTablesのテーブルの内容が...
-
PERL
-
【UWSC】HTML内のある部分を抽...
-
階層式メニューをtableタグ内に
-
IE以外でdisplay:noneで隠した...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsで質問です。 displayプロパ...
-
javascriptで質問です。 displa...
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
特定<table>内の<td>の色を変える
-
マウスをブラウザの外に出した...
-
添付画像のようなhtmlとcssのス...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
HTML中のTABLEのデータを抽出す...
-
jquery datatablesを使用 イン...
-
JavaScriptでテーブルをクリッ...
-
階層式メニューをtableタグ内に
-
マウスオーバー時テーブルの背...
おすすめ情報