table行的折叠和展开

最新推荐文章于 2024-09-09 12:04:46 发布

原创最新推荐文章于 2024-09-09 12:04:46 发布 · 2.6w 阅读

12 ·

CC 4.0 BY-SA版权

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

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

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