<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<style>
.parent{cursor:pointer;background:red;}
</style>
<script>
/*$(function(){
$("tr.parent").toggle(function(){
$(this).siblings(".child_"+this.id).hide();},function(){
$(this).siblings(".child_"+this.id).show();})
})*/
//动画toggle
$(function(){
$("tr.parent").click(function(){
$(this).siblings(".child_"+this.id).toggle();})
})
</script>
</head>
<body>
<table align="center">
<thead><tr><th>姓名</th><th>性别</th><th>居住地</th></tr></thead>
<tbody>
<tr class="parent" id="row_01"><td>前台设计小组</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="child_row_01"><td>张三</td><td>男</td><td>大连</td></tr>
<tr class="parent" id="row_02"><td>前台开发小组</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="child_row_02"><td>张三</td><td>男</td><td>海南</td></tr>
<tr class="parent" id="row_03"><td>后台设计小组</td></tr>
<tr class="child_row_03"><td>张三</td><td>男</td><td>邯郸</td></tr>
<tr class="child_row_03"><td>张三</td><td>男</td><td>保定</td></tr>
<tr class="child_row_03"><td>张三</td><td>男</td><td>邢台</td></tr>
<tr class="parent" id="row_04"><td>后台设计小组</td></tr>
<tr class="child_row_04"><td>张三</td><td>男</td><td>北京</td></tr>
<tr class="child_row_04"><td>张三</td><td>男</td><td>天津</td></tr>
<tr class="child_row_04"><td>张三</td><td>男</td><td>大名</td></tr>
</tbody>
</table>
</body>