jQueryを使ってテーブルの複数行を表示、非表示にしたい

投稿者: Anonymous

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

第一次会員クリック後

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

解決

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

<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>

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

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

<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>
function show_hide_row(row) {
  $("." + row).toggle();
}

_x000D_

_x000D_

#table_detail tr:hover {_x000D_
  background-color: #ddd;_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
#table_detail .hidden_row {_x000D_
  display: none;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_


_x000D_

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *