<p>jquery表格展开关闭</p>
<p>[html] view plaincopy<br />
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
<p><br />
<script language="javascript" src="jquery-1.7.1.min.js"></script><br />
<style type="text/css"> <br />
.selected{ <br />
background:#FF9900; <br />
cursor:pointer;} <br />
</style>
<br />
<script language="javascript"> <br />
$(function(){ <br />
$("tr.parent").click(function(){ <br />
$(this).toggleClass("selected").siblings(".child_"+this.id).toggle(); <br />
}); <br />
}); <br />
</script><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<p><br />
<title></title>
<br />
<br />
<br />
</p>
<p><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
<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="chile_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>David</td>
<td>女</td>
<td>浙江上海</td>
</tr>
</tbody>
</table>
<p></p>
<p><br />
</p>
<p><br />
</p>
<p></p>