最初の行のみ表示させておき、ボタンをクリックすれば全ての行が表示される実装の仕方をご教授いただきたいです。
言語:Javascript
<table>
<tr>
<th >名前</th>
<th >年齢</th>
<th >出身</th>
</tr>
<tr>
<th >taro</th>
<td>18</td>
<td>日本</td>
</tr>
<tr>
<th >jon</th>
<td>23</td>
<td>オーストラリア</td>
</tr>
<tr>
<th >Mia</th>
<td>20</td>
<td>アメリカ</td>
</tr>
</table>
<button>ボタン</button>
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
チェックボックスを追加してこうすればjsが不要になります
<style>
#cb{
display: none;
}
#cb:not(:checked) ~ table tr:not(:first-child){
display: none;
}
</style>
<input type="checkbox" id="cb">
<table border="1">
<tbody>
<tr>
<th >名前</th>
<th >年齢</th>
<th >出身</th>
</tr>
<tr>
<th >taro</th>
<td>18</td>
<td>日本</td>
</tr>
<tr>
<th >jon</th>
<td>23</td>
<td>オーストラリア</td>
</tr>
<tr>
<th >Mia</th>
<td>20</td>
<td>アメリカ</td>
</tr>
</tbody>
</table>
<button ><label for="cb">ボタン</label></button>
No.2
- 回答日時:
mcln さん
・・・・・最初の行のみ表示させておき、ボタンをクリックすれば全ての行が表示される・・・・・・・
例えば、↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
table tr{
display: none;
}
table tr:first-child{
display: table-row;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th >名前</th>
<th >年齢</th>
<th >出身</th>
</tr>
<tr>
<th >taro</th>
<td>18</td>
<td>日本</td>
</tr>
<tr>
<th >jon</th>
<td>23</td>
<td>オーストラリア</td>
</tr>
<tr>
<th >Mia</th>
<td>20</td>
<td>アメリカ</td>
</tr>
</table>
<button onclick="view()">ボタン</button>
<script>
const str = document.querySelectorAll("tr");
function view(){
str.forEach(function(e) {
e.style.display = "table-row";
});
}
</script>
</body>
</html>

No.1
- 回答日時:
行の表示を切り替えるサンプルは、調べれば出てくるので、それをボタンクリックのアクションで行う方法に変えればいいです。
https://aguaps.com/blog/resource/html_table/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし 3 2024/03/21 11:18
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を 5 2024/03/19 10:18
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ 3 2024/03/18 14:47
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlのエラーについて(デバッグ) 1 2023/11/13 20:54
- XML 特殊文字の検索方法 4 2024/03/03 07:33
- HTML・CSS pythonのコードについてご教示ください 1 2024/01/14 05:39
このQ&Aを見た人はこんなQ&Aも見ています
-


プログラミングについて プログラミングの練習(勉強)ができるようなサイトなどありませんか? あれば教
その他(プログラミング・Web制作)
-


プログラミングの進学について
その他(プログラミング・Web制作)
-


Web初心者です。 簡易的なWebページを作成し
その他(プログラミング・Web制作)
-
-
4

jqueryのselect2で検索欄の文字が消せない
JavaScript
-
5

至急助けてください!!!あと2時間しかないです! ボタンを押したら0ランプが点灯し、コンマ5秒後に1
その他(プログラミング・Web制作)
-
6

プログラミングのやり方ざっくりでいいから教えて
その他(プログラミング・Web制作)
-
7

Javascript で条件分岐を使い共通コードをまとめる方法が分かりません
JavaScript
-
8

submitで思うようにページが遷移しない
PHP
-
9

アップロードファイルを表示するためにはどうすればよいでしょうか?
PHP
-
10

c++の勉強方法を教えてくださいプログラミングをやった事がなく1から勉強を始めようと思います1日1時
C言語・C++・C#
-
11

フロントエンドエンジニアをしていますが、スキルアップのための転職、異動は3年目では早すぎますか? 今
その他(プログラミング・Web制作)
-
12

MediaRecorderで録音した音声を<audio>で再生しようとするとiPhoneでエラーにな
JavaScript
-
13

EJSを仕事でなんとなくで使っているので、もっと体系的に学びたいのですが、おすすめの本やサイトを教え
HTML・CSS
-
14

phpにはsession_regenerate_idがありセッションハイジャックに対して強靭なのです
Java
-
15

Visualbasicの現状について教えてください
Visual Basic(VBA)
-
16

C言語のことです。写真(見にくくてすいません)の下のプログラムを実行したいのですが四行目がおかしいと
C言語・C++・C#
-
17

CookieをWebStoeageに変える
JavaScript
-
18

IT業で開発をされてる方々に質問なんですが、一日に書かれるコード数ってどれくらいですか? また、最近
その他(プログラミング・Web制作)
-
19

SplFileObject を利用したときの5C問題?
PHP
-
20

htmlが簡単に作成できるアプリについて
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押したあとに画像を表...
-
スマホ上で、左右スワイプで次...
-
ラジオボタンを複数選択したと...
-
jsonテキストデータの並び替え...
-
Adobe acrobat proでフォームを...
-
画面に表示したらアニメーショ...
-
2025年相性がいい人のサイトの...
-
jQueryでのレスポンシブが綺麗...
-
jsで質問です。 formをsubmitし...
-
二次元配列を使って順位をだす...
-
【JS】selectでchangeした時の...
-
sessionStorageを調べています。
-
jsで質問です。 ボタンが二つ存...
-
ブックマークレットについて
-
タグを教えてください。
-
CookieをWebStoeageに変える
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
タグを教えてください。
-
jqueryのselect2で検索欄の文字...
-
jsonテキストデータの並び替え...
-
初心者です。gulpでコンパイル...
-
ラジオボタンを複数選択したと...
-
階層別の組織図の自動作成について
-
jQueryで同じクラス名のものを...
-
二次元配列を使って順位をだす...
-
読み込んだQRコードをフォーム...
-
画面遷移を行わずに同一ページ...
-
セレクトを全て選択されていな...
-
【Google Apps Script】「ライ...
-
Adobe acrobat proでフォームを...
-
二次元配列の全要素の全要素を...
-
【GAS】WEBアプリでハイパーリ...
-
GASでGoogleフォームの自動返信...
-
フォームが空欄の時にフォーム...
-
セレクトボックスで配列を呼び...
-
イラストレーター、縦中横のシ...
おすすめ情報








