JQ---表格展开与关闭
2015-11-30 15:13
120 查看
2015-11-30:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>表格的展开与关闭</title> <style type="text/css"> tr{ text-align: center; } th{ width: 120px; } .selected{ background-color: #7FFFD4; } </style> <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("tr.parent").click(function(){ $(this) .toggleClass("selected") .siblings('.child_'+this.id).toggle(); }).click(); }); </script> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> <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> </table> </body> </html>
相关文章推荐
- 从头开始学习dojo
- 堆
- 扒一扒传智播客深藏在背后的内幕
- Tomcat 系统架构与设计模式,第 1 部分: 工作原理
- 关于路径的一些操作
- 从nginx获取css无法解析的问题
- 数据结构实践项目——排序
- css 各种问题
- Windows Server 2016 TP4中RDS新增“多点服务”
- 解决EL表达式不能在Js文件中使用
- HTML5 Canvas渐进填充与透明(摘自 http://blog.csdn.net/jia20003/article/details/9251893)
- BUG处理方案设计
- IE中Ajax数据缓存的问题
- (原创)确保JAVA线程安全的4种常用方法
- Android 中 EventBus 的使用(3):多线程事件处理
- Java游戏服务器之数据库表存取封装
- Delphi中TStringList类常用属性方法详解
- #学习笔记#(2)引用外部CSS
- 巧妙运用小工具来使用jQuery生成树状结构
- angularJS学习1