重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

＜tr＞指定した表の行要素をボタンクリック後に表示させる方法

締切済

  • 質問者：mcln
  • 質問日時：
  • 回答数：4件

最初の行のみ表示させておき、ボタンをクリックすれば全ての行が表示される実装の仕方をご教授いただきたいです。

言語：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.4

  • 回答者： yambejp
  • 回答日時：

マルチポストしまくってそのまま放置してるとそのうち誰からも相手にされなくなりますよ

    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

チェックボックスを追加してこうすれば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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： gura_
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきありがとうございます。
無事に実装できました。

通報する
お礼日時：2024/09/23 14:30

参考程度に

No.1

  • 回答者： rera1016
  • 回答日時：

行の表示を切り替えるサンプルは、調べれば出てくるので、それをボタンクリックのアクションで行う方法に変えればいいです。


https://aguaps.com/blog/resource/html_table/
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきありがとうございました。

通報する
お礼日時：2024/09/23 14:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報