jQuery實現的表格展開伸縮效果例項

https://www.cnblogs.com/yangpeng-jingjing/p/6003403.html

<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>暫住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01">
<td colspan="3">前臺設計組</td>
</tr>
<tr class="child_row_01">
<td>張山</td>
<td>男</td>
<td>浙江寧波</td>
</tr>
<tr class="child_row_01">
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="parent" id="row_02">
<td colspan="3">前臺開發組</td>
</tr>
<tr class="child_row_02">
<td>王五</td>
<td>男</td>
<td>湖南長沙</td>
</tr>
<tr class="child_row_02">
<td>找六</td>
<td>男</td>
<td>浙江溫州</td>
</tr>
<tr class="parent" id="row_03">
<td colspan="3">後臺開發組</td>
</tr>
<tr class="child_row_03">
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr class="child_row_03">
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

<script>
$(function () {
$('tr.parent').click(function () {
//$(this).toggleClass("selected")//新增/刪除高亮
//.siblings('.child_' + this.id).toggle();
$(this).siblings('.child_' + this.id).toggle();
})
})
</script>

 

 

 

<style>
table {
border: 0;
border-collapse: collapse;
}

td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}

th {
font: bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
width: 100px;
}

.parent {
background: #FFF38F;
cursor: pointer;
}
/* 偶數行樣式*/
.odd {
background: #FFFFEE;
}
/* 奇數行樣式*/
.selected {
background: #FF6500;
color: #fff;
}
</style>