table行的折叠和展开

本文介绍了一种使用HTML、CSS和JavaScript实现表格行折叠效果的方法。通过点击表格的特定行可以展开或隐藏详细信息,适用于展示复杂的表格数据。文章提供了两种实现方案:一种是基于表格标签的实现方式,另一种是采用div标签模拟表格。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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.注意

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


评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值