天易24----jquery实现表格的展开伸缩
2012-11-26 20:03
295 查看
一:示例图如下:
二:示例代码:
1)默认打开状态:
2)当点击第一组时:
二:示例代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title></title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="<%=basePath %>js/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.t').click(function(){ $(this).toggleClass("selected").siblings(".child_"+this.id).toggle(); }).click();//不添加click()方法默认打开是全展现 }); </script> <style type="text/css"> *{padding:0;margin:0;} body {padding:100px;font-size:12px;font-family:"宋体";} table{border-coliapse:coliapse;} th{border-bottom:1px solid #000;padding:5px 15px;} td{padding:5px 15px;} .t{background:#eee;cursor:pointer;} .selected{background:#ccc} </style> </head> <body> <table border="1"> <thead> <th>姓名</th><th>年龄</th><th>电话</th> </thead> <tbody> <tr class="t" id="row_1"><td colspan="3">第一组</td></tr> <tr class="child_row_1"><td>王子虎</td><td>22</td><td>13064073789</td></tr> <tr class="child_row_1"><td>王子虎1</td><td>21</td><td>13064073701</td></tr> <tr class="t" id="row_2"><td colspan="3">第二组</td></tr> <tr class="child_row_2"><td>王子虎2</td><td>23</td><td>13064073702</td></tr> <tr class="child_row_2"><td>王子虎3</td><td>24</td><td>13064073703</td></tr> <tr class="t" id="row_3"><td colspan="3">第三组</td></tr> <tr class="child_row_3"><td>王子虎4</td><td>25</td><td>13064073704</td></tr> <tr class="child_row_3"><td>王子虎5</td><td>26</td><td>13064073705</td></tr> </tbody> </table> </body> </html>
相关文章推荐
- jQuery实现的表格展开伸缩效果实例
- jQuery实现表格展开与折叠的方法
- 用jquery实现可伸缩的表格
- jQuery实现table表格信息的展开和缩小功能示例
- jQuery 表格展开伸缩
- jQuery 表格展开伸缩
- 用Jquery简单实现表格的展开与折叠
- jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
- jQuery实现展开伸缩效果
- jquery实现可点击伸缩与展开的菜单效果代码
- jQuery 表格展开伸缩
- jquery实现点击向下展开菜单项(伸缩导航)效果
- jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
- asp.net的jQuery 表格展开伸缩
- jquery实现可点击伸缩与展开的菜单效果代码
- jQuery实现表格展开与折叠的方法
- jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽,按列排序,并可以保存排序后的结果
- 《Javaweb---JQuery实现可编辑的表格》
- jquery 操作表格实现代码(多种操作打包)