jquery表格展开关闭
2012-09-12 15:34
375 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><script language="javascript" src="jquery-1.7.1.min.js"></script> <style type="text/css"> .selected{ background:#FF9900; cursor:pointer;} </style> <script language="javascript"> $(function(){ $("tr.parent").click(function(){ $(this).toggleClass("selected").siblings(".child_"+this.id).toggle(); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <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> </body> </html>
相关文章推荐
- jQuery 表格应用:隔行变色,展开关闭,内容筛选
- jQuery 表格展开关闭
- 5.2.2: jQuery的表格展开关闭
- JQuery实现展开关闭层的方法
- jquery 文本超出隐藏 关闭展开
- jQuery实现table表格信息的展开和缩小功能示例
- jQuery 表格展开伸缩
- 天易24----jquery实现表格的展开伸缩
- jQuery实现的表格展开伸缩效果实例
- jquery实现菜单功能(单击展开或者关闭)-一般应用于后台
- jquery树形 点击标题展开关闭
- 表格应用---5.2.2: 表格展开关闭(*)
- JQ---表格展开与关闭
- jQuery学习笔记(7)--表格展开关闭
- jquery表格展开折叠代码
- jQuery实现点击展开其他自动关闭
- 用Jquery简单实现表格的展开与折叠
- jQuery 表格展开伸缩
- jQuery表格应用-单选框复选框以及表格展开收缩
- jQuery实现表格展开与折叠的方法