jQuery实现的表格展开伸缩效果实例

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