テーブルの行を表示させたり、非表示にさせたい

テーブルのある行を表示させたり、表示させてり非表示したりを考えているのですが
普通のjqueryでは<tr><td>をはさむと作動しなくなります。

サイトをみつけて作成してみたのですが、クリックすれば対象の全部が　表示したり表示されなかったりします。
クリックすれば指定の行（場合によっては複数行）だけ普段は非表示、クリックすれば表示する方法はないでしょうか。

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2<script>
3// 初期表示
4$(function(){
5    // 初期表示でチェックボックスが空だったら非表示エリアを隠す
6    if ($('#check').val() != '1') {
7        $('.hide_area').hide();
8    }
9});
10// 表示/非表示
11var speed = 500; //表示アニメのスピード（ミリ秒）
12var stateDeliv = 1;
13function hideToggle(hidearea) {
14    hidearea.toggle(speed);
15}
16</script>
17<table class="table table-bordered table-hover">
18    <tr>
19        <td>
20        <td>1</td>
21        <td>iPhone</td>
22    </tr>
23    <tr>
24        <td>2</td>
25        <td>iPad</td>
26    </tr>
27<!-- 表示・非表示をする行 -->
28    <tr><td><label>
29         <p  onclick="hideToggle($('.hide_area'));"> 表示させる！</p>
30    </label></td></tr>
31
32    <tr class="hide_area">
33        
34        <td>3</td>
35        <td>iPod</td>
36    </tr>
37    <!-- 表示・非表示をする行 -->
38    <tr><td><label>
39         <p  onclick="hideToggle($('.hide_area'));"> 表示させる！</p>
40    </label></td></tr>
41    <tr class="hide_area">
42        <td>4</td>
43        <td>Mac Book Pro</td>
44    </tr>
45    <tr>
46        <td>5</td>
47
48        <td>Mac Book Air</td>
49    </tr>
50</table>

参考にしたサイト
https://blog.shuffleee.com/1188/

azuapricot

2019/10/21 07:24

'.hide_area' → class名が hide_area のところを全部トグルするっていうコードになってますねー

行動規範の内容に同意します

回答1件

ベストアンサー

具体的な希望する挙動がわからないのでなんともいえませんが、こんな感じですか？
（jQueryの場所まで書いたのでそのままコピペすること）

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('.hide_area').on('click',function(){
5    $(this).hide();
6    if($(this).nextAll('.dummy').length==0){
7      $(this).after($('<tr class="dummy"><td colspan="2">表示させる</td></tr>'));
8    }else{
9      $(this).next('.dummy').show();
10    }
11  }).trigger('click');
12  $('.dummy').on('click',function(){
13    $(this).prev('.hide_area').show();
14    $(this).hide();
15  });
16});
17</script>
18<table border>
19    <tr>
20        <td>1</td>
21        <td>iPhone</td>
22    </tr>
23    <tr>
24        <td>2</td>
25        <td>iPad</td>
26    </tr>
27    <tr class="hide_area">
28        <td>3</td>
29        <td>iPod</td>
30    </tr>
31    <tr class="hide_area">
32        <td>4</td>
33        <td>Mac Book Pro</td>
34    </tr>
35    <tr>
36        <td>5</td>
37
38        <td>Mac Book Air</td>
39    </tr>
40</table>

投稿2019/10/21 07:43

編集2019/10/21 09:15

yambejp

総合スコア116661

Sibutakiti

2019/10/21 07:49

ありがとうございます。早速、落としてみたのですが表のみの表示でどこをクリックすれば、指定の行が非表示になるのでしょうか？

yambejp

2019/10/21 08:11

「表示させる」が表示されませんか？ jQueryは別途先に読み込んでください

Sibutakiti

2019/10/21 09:10

頂いたコードでは、「表示させる」が表示されませんが私のコードにjQueryのみはれば表示して　そこの行のみ表示　非表示ができました。ありがとうございました。ちなみに３はそのままで４と５の行をまとめて非表示/表示にしたいのですが、4 と5を<div class="hide_area">4の行の記述　5の行の記述</div>としたのですが、作動しません。いいやり方はないでしょうか。質問が悪くて２度手間になって申し訳けございませんが何卒よろしくお願いします。

yambejp

2019/10/21 09:16

らちがあかない感じなのでjQueryのタグも追記しました一言一句違わぬよう提示したソースをコピペして表示及び動作を確認してください

Sibutakiti

2019/10/21 09:23

jQueryのタグを入れたら作動しました。ありがとうございました。一旦終了としますが、div等でまとめて行非表示の方法もご教授頂けるとありがたいです。

yambejp

2019/10/21 09:31

もとのソースのテーブルがおかしいのでHTMLとしてちゃんと表示できるようにしてから改めてご質問ください

Sibutakiti

2019/10/21 09:33

了解しました。