まず、初期状態で二行目以降が表示されているのは、二行目以降の 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();
}
#table_detail tr:hover {
background-color: #ddd;
cursor: pointer;
}
#table_detail .hidden_row {
display: none;
}
<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>
function show_hide_row(e) {
$(e.delegateTarget)
.nextUntil(".table-header")
.toggle();
}
$(function() {
$(".table-header").on("click", show_hide_row);
});
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;
}
<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>