<p>jquery表格展开关闭</p> <p>[html] view plaincopy<br /> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</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>
返回顶部 留言