1.html
<div class="custom-fold-table"> <table cellpadding="0" cellspacing="0" width="100%" class="ellipsis-thead custom-table last-column-center table-border"> <thead> <tr> <th width="12%">编号</th> <th width="18%" class="tal">名称</th> <th width="12%" class="tal">总造价（元）</th> <th width="12%" class="tal">占工程费用比例</th> <th width="12%" class="tal">单方造价(元/m2)</th> <th width="9%">指标标杆</th> </tr> </thead> </table> <div class="tree-table"> <div class="tr-level-1"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>001</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%"><p class="red">154561</p></td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-2"> <div class="tr-level-2"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click font-bold"><div class="arrow-icon"></div>0011</td> <td width="18%" class="font-bold">土建工程</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%"><span class="red">154561</span></td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-3"> <div class="tr-level-3"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-4"> <div class="tr-level-4"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-5"> <div class="tr-level-5"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%">001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="tr-level-3"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-4"> <div class="tr-level-4"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-5"> <div class="tr-level-5"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%">001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> <div class="tr-level-2"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click font-bold"><div class="arrow-icon"></div>0011</td> <td width="18%" class="font-bold">土建工程</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%"><span class="red">154561</span></td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-3"> <div class="tr-level-3"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-4"> <div class="tr-level-4"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-5"> <div class="tr-level-5"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%">001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="tr-level-3"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-4"> <div class="tr-level-4"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> <div class="level-5"> <div class="tr-level-5"> <table class="custom-table ellipsis-table last-column-center table-border"> <tbody> <tr> <td width="12%">001111</td> <td width="18%">分部分项合计</td> <td width="12%">154323000</td> <td width="12%">20%</td> <td width="12%">154561</td> <td width="9%">154323000</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
2.css
/*折叠表格*/ .custom-fold-table .custom-table{width:100%;border-collapse:collapse;} .custom-fold-table .custom-table>thead>tr{background-color:#fffbf8;} .custom-fold-table .custom-table>thead>tr>th{position:relative;height:44px;font-size:14px;text-align:left;padding:0 10px;} .custom-fold-table .custom-table>thead>tr>th:first-child{border-left:0;} .custom-fold-table .custom-table.first-column-center>thead>tr>th:first-child, .custom-fold-table .custom-table.first-column-center>tbody>tr>td:first-child{text-align:center;} .custom-fold-table .custom-table.last-column-center>thead>tr>th:last-child,.custom-fold-table .custom-table.last-column-center>tbody>tr>td:last-child{text-align:center;} .custom-fold-table .custom-table>tbody>tr:hover{background-color:#FEF3F3;} .custom-fold-table .custom-table>tbody>tr>td{position:relative;text-align:left;padding:0 10px;color:#354052; border-bottom:1px solid #e5e5e5;height: 40px;} .ellipsis-thead{table-layout:fixed;} .ellipsis-thead th{width:100%;} /*表格有边框*/ .custom-fold-table .table-border th{padding: 0 3px; border:1px solid #e5e5e5; border-right: none;} .custom-fold-table .table-border>thead>tr>th:first-child{border-left:1px solid #e5e5e5;;} .custom-fold-table .table-border td{border-left:1px solid #e5e5e5;} .custom-fold-table .table-border{border-right:1px solid #e5e5e5; } .tree-table .tr-level-2:last-of-type div:last-of-type:before{content:'';border-bottom:0;} /*树形表格组件*/ /*.tree-table table>tbody>tr:hover{background-color:transparent;}*/ .tree-table .tr-level-1{position:relative;/*background-color:#fff;*/} .tree-table .tr-level-2{position:relative;display:none;/*background-color:#f4f8fb;*/} .tree-table .tr-level-2 table>tbody>tr>td:first-child{text-indent:35px;position:relative;} .tree-table .tr-level-2:before{content:'';position:absolute;left:0;top:0;bottom:0;width:50px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;} .tree-table .tr-level-3{position:relative;display:none;/*background-color:#E9EFF5;*/} .tree-table .tr-level-3 table>tbody>tr>td:first-child{text-indent:58px;} .tree-table .tr-level-3:before{content:'';position:absolute;left:0;top:-1px;bottom:0;width:70px;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;} .tree-table .tr-level-4,.tree-table .tr-level-5{position:relative;display:none;/*background-color:#e3eaf0;*/} .tree-table .tr-level-4 table>tbody>tr>td:first-child{text-indent:80px;} .tree-table .tr-level-5 table>tbody>tr>td:first-child{text-indent:104px;} .tree-table .tr-level-4:before{content:'';position:absolute;left:0;top:-1px;bottom:0;width:90px;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;} .tree-table .tr-level-5:before{content:'';position:absolute;left:0;top:-1px;bottom:0;width:110px;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;} /*树形表格组件左边的线*/ .tree-table .tr-level-2:after{content:'';position:absolute;left:21px;top:0;height:100%;/*bottom:0;*/border-left:1px solid #CAD6E1;} .tree-table .tr-level-1 .tr-level-2:last-child:after{top:0;height:21px;} .tree-table .tr-level-1 .tr-level-2.last-child:after{top:0;height:21px;} .tree-table .tr-level-3:after{content:'';position:absolute;left:41px;top:0;height:100%;border-left:1px solid #CAD6E1;} .tree-table .tr-level-2 .tr-level-3:last-child:after{top:0;height:21px;} .tree-table .tr-level-2 .tr-level-3.last-child:after{top:0;height:21px;} .tree-table .tr-level-4:after,.tree-table .tr-level-5:after{content:'';position:absolute;left:61px;top:0;height:100%;border-left:1px solid #CAD6E1;} .tree-table .tr-level-5:after{left:80px;} .tree-table .tr-level-3 .tr-level-4:last-child:after{top:0;height:21px;} .tree-table .tr-level-4 .tr-level-5:last-child:after{top:0;height:21px;} .tree-table .tr-level-3 .tr-level-4.last-child:after{top:0;height:21px;} .tree-table .tr-level-4 .tr-level-5.last-child:after{top:0;height:21px;} .tree-table .tr-level-2 tr>td:first-child{background:url(../img/common/treetable-line.png) no-repeat 21px -55px;} .tree-table .tr-level-2 tr>td.active:first-child{background-position:21px -5px;} .tree-table .tr-level-3 tr>td:first-child{background-position:41px -55px;} .tree-table .tr-level-3 tr>td.active:first-child{background-position:41px -5px;} .tree-table .tr-level-4 tr>td:first-child{background-position:60px -55px;} .tree-table .tr-level-5 tr>td:first-child{background-position:80px -55px;} .tree-table .tr-level-4 tr>td.active:first-child{background-position:60px -5px;} .tree-table .tr-level-5 tr>td.active:first-child{background-position:80px -5px;} .tree-table .fold-click{cursor:pointer;} .tree-table .fold-click>.arrow-icon{display:inline-block;vertical-align:middle;width:23px;height:20px;background:url(../img/common/sprite-up.png) no-repeat -1px 0;cursor:pointer;} .tree-table .fold-click.active>.arrow-icon{background-position:-22px 0;}
3.js
// 折叠表格数组件 $(document).on('click','.tree-table .fold-click',function (e) { if($(this).hasClass('active')){ $(this).toggleClass('active').closest('table').nextAll().children().slideUp(); } else{ $(this).toggleClass('active').closest('table').nextAll().children().slideDown(); } }); // 给每一层级的最后一行添加last-child类，兼容ie8左侧线条 $(".tree-table .tr-level-1 .tr-level-2:last-child,.tree-table .tr-level-2 .tr-level-3:last-child,.tree-table .tr-level-3 .tr-level-4:last-child,.tree-table .tr-level-4 .tr-level-5:last-child").addClass('last-child');
附图：