![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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
-
PHPでこのコード自体に意味は無いんですけど、上のifと下のifの違いってなんですか?個人的には下の
PHP
-
-
4
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
5
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
6
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
7
Javascriptエラーの原因が分からない
JavaScript
-
8
WEBサイトの作成で、imgタグには現在もwidthとheightの指定が推奨ですか?
HTML・CSS
-
9
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
10
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトする
HTML・CSS
-
11
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
12
40代後半でゼロからのプログラム業界への転職
その他(プログラミング・Web制作)
-
13
HTMLで作った時報アプリが動きません
JavaScript
-
14
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
15
iOSのみダブルタップが必要
JavaScript
-
16
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
17
あなたのXAMPPのdashboard内のjavascriptsのall.jsを見せて欲しい。バグ?
その他(プログラミング・Web制作)
-
18
先日ウェブデザイン技能検定三級を受けたのですが、公式の解答では答えが②となっているのですがその理由が
HTML・CSS
-
19
JavascriptのHTMLクラス表示について
JavaScript
-
20
テキストファイルの1行目のみを削除したい
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マウスオーバーで複数の画像を...
-
一覧から選択した行の行番号を...
-
ロールオーバー?について
-
スクロールバーの表示位置を変...
-
jQuery.eachの使い方について教...
-
至急!GetElementById でtdの...
-
【JQuery】テーブルで行選択さ...
-
「オブジェクトは、このプロパ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
jquery datatablesを使用 イン...
-
tableの任意行にfocusをあてる
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
テーブル内に表示されている数...
-
【UWSC】HTML内のある部分を抽...
-
プルダウンで選択すると、DBの...
-
リンク色の変更
-
ハイパーリンクを別ウインドウ...
-
javascriptで質問です。 displa...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
テーブルの項目の値取得
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報