59868


表を作成していて初期は隠し行ありの状態でその行をクリックすれば隠し行すべてが表示されるものを作成しております。  
現状下記サイトを参考にして作成したのですが、１行しか開閉できません。（初期状態で残りの行も見えてしまう）  
<http://kachibito.net/snippets/expand-table-rows-using-jquery-html-and-css>  
複数行開閉する方法があれば教えて頂きたくお願いします。尚、理想の画面は次の通りです。  
初期  
[![初期画面（理想形）](https://i.stack.imgur.com/2wDHC.png)](https://i.stack.imgur.com/2wDHC.png)

[![第一次会員クリック後](https://i.stack.imgur.com/BlBcn.png)](https://i.stack.imgur.com/BlBcn.png)

[code]

    <style type="text/css">
      #table_detail tr:hover{
     background-color:#ddd;
     cursor:pointer;
    }
    #table_detail .hidden_row{
     display:none;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
     function show_hide_row( row ) { $( "#" + row ).toggle(); }
     </script>
    
    <!DOCTYPE html>
    <table border=1 id="table_detail" align=center cellpadding=10>
    
    
      <tr onclick="show_hide_row('hidden_row1');">
        <td colspan="4">第一次会員様</td>
      </tr>
      <tr id="hidden_row1" class="hidden_row">
        <th>名前</td><td>住所</td><td>電話番号</td><td>グループ</td>
      </tr>
      <tr id="hidden_row1" class="hidden_row"></tr>
        <td>山田太郎</td>
        <td>東京都</td>
        <td>03-34566-7777</td>
        <td>A</td>
      </tr>
      <tr id="hidden_row1" class="hidden_row"></tr>
      <td>宇田太郎</td>
      <td>東京都</td>
      <td>03-1111-7777</td>
      <td>A</td>
      </tr>
      <tr onclick="show_hide_row('hidden_row2');">
        <td colspan="4">第二次会員様</td>
      </tr>
      <tr id="hidden_row2" class="hidden_row">
        <th>名前</td><td>住所</td><td>電話番号</td><td>グループ</td>
      </tr>
    </table>
    </html>
[/code]


CC BY-SA 4.0
2019-10-22T05:30:54.710
59866
2019-10-22T06:47:29.680
2019-10-22T06:47:29.680
32986
36297
question
javascript html jquery css
jQueryを使ってテーブルの複数行を表示、非表示にしたい


まず、初期状態で二行目以降が表示されているのは、二行目以降の `tr` 要素が `td` 要素の前に終了しているからです。以下のように適切な範囲を `tr`
要素へ入れることでこの問題は解決出来ます。

[code]

    <table border=1 id="table_detail" align=center cellpadding=10>
      <tr onclick="show_hide_row('hidden_row1');">
        <td colspan="4">第一次会員様</td>
      </tr>
      <tr id="hidden_row1" class="hidden_row">
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
      <tr id="hidden_row1" class="hidden_row">
        <td>山田太郎</td>
        <td>東京都</td>
        <td>03-34566-7777</td>
        <td>A</td>
      </tr>
      <tr id="hidden_row1" class="hidden_row">
        <td>宇田太郎</td>
        <td>東京都</td>
        <td>03-1111-7777</td>
        <td>A</td>
      </tr>
      <tr onclick="show_hide_row('hidden_row2');">
        <td colspan="4">第二次会員様</td>
      </tr>
      <tr id="hidden_row2" class="hidden_row">
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
    </table>
    
    
[/code]

HTML
を上記のように修正すると、ページ読み込み時の状態で二行目以降が表示されることはなくなります。しかし、クリックする度に表示される行数が一行のみとなってしまいます。これは、どの行を表示するかの判定のために
`show_hide_row` 関数に渡している `id` 属性の値が、 **文書上において一つの要素にしか適用されてはならない**
からです。そのため、その id が最初に適用された要素のみが行の開閉を行っています。

この状況を改善するためには、幾つかの方法があります。今回は、文書上において複数の要素に適用されても良い `class` 属性を使います。これを使用すると、
HTML は以下のようになります。また、この変更に伴い、 jQuery のコードにも以下の修正を行う必要があります。

[code]

    <table border=1 id="table_detail" align=center cellpadding=10>
      <tr onclick="show_hide_row('hidden_row1');">
        <td colspan="4">第一次会員様</td>
      </tr>
      <tr class="hidden_row hidden_row1">
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
      <tr class="hidden_row hidden_row1">
        <td>山田太郎</td>
        <td>東京都</td>
        <td>03-34566-7777</td>
        <td>A</td>
      </tr>
      <tr class="hidden_row hidden_row1">
        <td>宇田太郎</td>
        <td>東京都</td>
        <td>03-1111-7777</td>
        <td>A</td>
      </tr>
      <tr onclick="show_hide_row('hidden_row2');">
        <td colspan="4">第二次会員様</td>
      </tr>
      <tr class="hidden_row hidden_row2">
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
    </table>
    
[/code]

[code]

    function show_hide_row(row) {
      $("." + row).toggle();
    }
    
[/code]

[code]

    #table_detail tr:hover {
      background-color: #ddd;
      cursor: pointer;
    }
    
    #table_detail .hidden_row {
      display: none;
    }
[/code]

[code]

    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      function show_hide_row(row) {
        $("." + row).toggle();
      }
    </script>
    <table border=1 id="table_detail" align=center cellpadding=10>
      <tr onclick="show_hide_row('hidden_row1');">
        <td colspan="4">第一次会員様</td>
      </tr>
      <tr class="hidden_row hidden_row1">
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
      <tr class="hidden_row hidden_row1">
        <td>山田太郎</td>
        <td>東京都</td>
        <td>03-34566-7777</td>
        <td>A</td>
      </tr>
      <tr class="hidden_row hidden_row1">
        <td>宇田太郎</td>
        <td>東京都</td>
        <td>03-1111-7777</td>
        <td>A</td>
      </tr>
      <tr onclick="show_hide_row('hidden_row2');">
        <td colspan="4">第二次会員様</td>
      </tr>
      <tr class="hidden_row hidden_row2">
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
    </table>
[/code]

* * *
[code]

    function show_hide_row(e) {
      $(e.delegateTarget)
        .nextUntil(".table-header")
        .toggle();
    }
    $(function() {
      $(".table-header").on("click", show_hide_row);
    });
[/code]

[code]

    table {
      margin: 0 auto;
    }
    
    th,
    td {
      padding: 10px;
    }
    
    #table_detail tr:hover {
      background-color: #ddd;
      cursor: pointer;
    }
    
    .table-header~tr:not(.table-header) {
      display: none;
    }
[/code]

[code]

    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <table border="1" id="table_detail">
      <tr class="table-header">
        <th colspan="4">第一次会員様</th>
      </tr>
      <tr>
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
      <tr>
        <td>山田太郎</td>
        <td>東京都</td>
        <td>03-34566-7777</td>
        <td>A</td>
      </tr>
      <tr>
        <td>宇田太郎</td>
        <td>東京都</td>
        <td>03-1111-7777</td>
        <td>A</td>
      </tr>
      <tr class="table-header">
        <th colspan="4">第二次会員様</th>
      </tr>
      <tr>
        <td>名前</td>
        <td>住所</td>
        <td>電話番号</td>
        <td>グループ</td>
      </tr>
    </table>
[/code]


CC BY-SA 4.0
2019-10-22T06:11:08.110
59868
2019-10-22T06:46:33.150
2019-10-22T06:46:33.150
32986
32986
59866
answer