table行的摺疊和展開

1.效果圖javascript

2.htmlcss

<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.實現思路

控制類的顯示隱藏就能夠達到那個效果。html

第二種方法java

1.效果圖
ide

2.htmlthis

這是用div實現的表格spa

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

表格的每列寬度須要注意設置一下。
code