table行的折叠和展开

1.效果图

2.html

<table id="detail_table" class="table" > <col style="width:80px;"> <col style="width:80px;"> <col style="width:150px;"> <col style="width:150px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:150px;"> <col style="width:100px;"> <col
style="width:100px;"> <col style="min-width:80px;"> <col style="width:150px;"> <thead> <tr> <th>编号</th> <th> 部门名称 </th> <th> 老人姓名 </th> <th>基本费用</th> <th>付费方式</th> <th>折扣</th> <th>总支付</th> <th>入院时间</th> <th>出院时间</th> <th>退换金额</th> <th>是否结算</th> </tr> </thead>
<tbody> <!--第一行--> <tr class="parent" id="row123"> <td>123</td> <td> 部门名称 </td> <td> 老人姓名 </td> <td>基本费用</td> <td>付费方式</td> <td>折扣</td> <td>总支付</td> <td>入院时间</td> <td>出院时间</td> <td>退换金额</td> <td>是否结算</td> </tr> <!--第一行展开--> <tr class="child-row123 child-head-background">
<th>编号</th> <th colspan="2"> 入院时间 </th> <th colspan="2"> 离院时间 </th> <th colspan="2">在院时间</th> <th colspan="5">离院原因</th> </tr> <tr class="child-row123 child-background"> <td>123</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td>
<td colspan="5">Another description</td> </tr> <tr class="child-row123 child-background"> <td>123</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td> <td colspan="5">Another description</td> </tr> <!--第二行-->
<tr class="parent" id="row124"> <td>124</td> <td> 部门名称 </td> <td> 老人姓名 </td> <td>基本费用</td> <td>付费方式</td> <td>折扣</td> <td>总支付</td> <td>入院时间</td> <td>出院时间</td> <td>退换金额</td> <td>是否结算</td> </tr> <tr class="child-row124 child-head-background"> <th>编号</th> <th
colspan="2"> 入院时间 </th> <th colspan="2"> 离院时间 </th> <th colspan="2">在院时间</th> <th colspan="5">离院原因</th> </tr> <tr class="child-row124 child-background"> <td>123</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td>
<td colspan="5">Another description</td> </tr> <tr class="child-row124 child-background"> <td>123</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td> <td colspan="2">2007-02-03</td> <td colspan="5">Another description</td> </tr> </tbody> </table>

3.javascript

 $(document).ready(function () {$(function() {$('tr.parent').css("cursor","pointer").attr("title","点击这里展开/关闭").click(function(){$(this).siblings('.child-'+this.id).toggle();//当前点击某行同胞行，查找制定子元素类，折叠隐藏});});})

4.实现思路

控制类的显示隐藏就可以达到那个效果。
第二种方法
1.效果图


2.html
这是用div实现的表格

<div class='tbody-contain'>
//第一行
<div class='item-contain'>
<div class='item-parent'></div>
<div class='item-child'></div>
<div class='item-child'></div>
</div>
//第二行
<div class='item-contain'>
<div class='item-parent'></div>
<div class='item-child'></div>
<div class='item-child'></div>
</div>
</div>

3.js

 $scope.toggle=function ($event) { //参数事件if($($event.target).html()=='展开'){//通过事件获取发生这个事件的元素$($event.target).html('收起');$($event.target).parents('.bill-list-title').siblings('.bill-list-detial').show();}else{$($event.target).html('展开');$($event.target).parents('.bill-list-title').siblings('.bill-list-detial').hide();}};

4.注意

表格的每列宽度需要注意设置一下。

table行的折叠和展开相关推荐

java刷新透视表数据源,Java 创建、刷新Excel透视表/设置透视表行折叠、展开
Java 创建.刷新Excel透视表/设置透视表行折叠.展开透视表是依据已有数据源来创建的交互式表格,我们可在excel中创建透视表,也可编辑已有透视表.本文以创建透视表.刷新透视表以及设置透视表的 ...
java excel 展开折叠_Java 创建、刷新Excel透视表/设置透视表行折叠、展开
透视表是依据已有数据源来创建的交互式表格,我们可在excel中创建透视表,也可编辑已有透视表.本文以创建透视表.刷新透视表以及设置透视表的行展开或折叠为例,介绍具体的操作方法. 所需工具:Free S ...
java excel 展开折叠_java创建和刷新excel透视表，还可设置透视表行折叠和展开的实例...
码农公社 210.net.cn 210是何含义?10月24日是程序员节,1024 =210.210既 210 之意. java创建和刷新excel透视表,还可设置透视表行折叠和展开的实例透视表是 ...
elementUI中el-table树形与el-tree树形结构的一键折叠与展开
elementUI中el-table树形与el-tree树形结构的一键折叠与展开 1.业务需求: vue项目,权限菜单管理中菜单table的树形结构,一般情况下如果使用的是elementUI那么可以使 ...
uni-app中文本过长-实现折叠与展开效果
在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个项目,也遇到此情况,就将此顺便总结下来~ 一.先上效果二.源码 <template>& ...
html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
Java 在Excel中创建多级分组、折叠或展开分组
本文介绍通过Java程序在Excel创建分组的方法,可对行或列分组进行分组并设置明细数据是否展开或折叠.设置数据分组并展开或折叠时,可通过以下方法: 方法一: 通过方法sheet.groupByRow ...
java 下拉列表可折叠 qq分组_Java在Excel中创建多级分组、折叠或展开分组的实现...
本文介绍通过Java程序在Excel创建分组的方法,可对行或列分组进行分组并设置明细数据是否展开或折叠.设置数据分组并展开或折叠时,可通过以下方法: 方法一: 通过方法sheet.groupByRow ...
java 下拉列表可折叠 qq分组_Java 在Excel中创建多级分组、折叠或展开分组
以下经验内容分享通过Java程序在Excel中创建多级分组.折叠或展开分组. 可对行或列分组进行分组并设置明细数据是否展开或折叠.设置数据分组并展开或折叠时,可通过以下方法: 方法一: 通过方法she ...

table行的折叠和展开

table行的折叠和展开相关推荐

最新文章

热门文章