table表格同级下拉与收起

来源：互联网发布：好用的气垫知乎编辑：程序博客网时间：2024/06/07 02:28
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .tables{border-top:1px solid #e0ebff;border-left:1px solid #e0ebff;/* margin:0 15px 20px 15px; */}        .tables thead tr th{border-right:1px solid #e0ebff;padding:0 10px;line-height:normal;border-bottom: 1px solid  #e0ebff;}        .tables.fixed thead tr th{white-space:nowrap;}        .tables thead tr .th-one{text-align:center;}        .tables thead tr .th-two{text-align:right;}        .tables tbody tr td{border-right:1px solid #e0ebff;padding:10px;border-bottom:1px solid #e0ebff;}        .tables tbody tr .th-one{text-align:center;}        .tables tbody tr .th-two{text-align:right;padding-right:25px;}        .tables tbody tr .color{color:#246bba;font-weight:bold;font-size:14px;text-align:center;}        .tables thead tr .th{padding-left:0;padding:0 10px;text-align:center;}        .tables thead tr .th .jt-icon{width:14px;height:15px;background:url(../img/jt-icon.png) no-repeat;display:inline-block;}        .tables tbody tr td{/*background-color:#f7fafe;*/}        .tables tbody .tr td{background-color:#fffbf8;text-indent:20px;}        .tables tbody .tr-t td{background-color:#ffffff;color:#999999;text-indent:40px;}        .tables tbody tr .td{padding:0 10px;text-align:center;cursor:pointer;text-indent:0;}        .tables tbody tr .td i{background:url(../img/sprite-jt.png) no-repeat;display:inline-block;}        .tables tbody tr .td .x-icon{width:14px;height:7px;background-position:-29px -5px;}        .tables tbody tr .td .null-icon{width:14px;height:0px;}        .tables tbody tr .td .jt-icon{width:14px;height:7px;background-position:-5px -5px;}        .tables .project-tb .tr-bj td{background-color:#fff;text-align:center;padding-left:0;}        .project-one{display:none;}        .project-three{display:none;}        .project-two tbody .tr td{text-indent:0;}        .project-three tbody .tr-t td{text-indent:0;}        .project-down-2 tbody .tr-t td{text-indent:0;}        .project-down-2 tbody .tr2 td{background-color:#fffbf8;}        .project-down-2{display:none;}        .project-down-3{display:none;}        .project-down-4{display:none;}        .project-down-5{display:none;}        .project-down-6{display:none;}        .project-down-3 .tr3 td{background:#FFF1F1;}        .project-down-4 .tr4 td{background:#FFF5F5;}        .project-down-5 .tr5 td{background:#FFF9F9;}        .project-down-6 .tr6 td{background:#f5eaea;}        .project-down-7 .tr7 td{background:#F7F7F7;}        .pro-wd tr td{background-color:#fff;}        .tables .pro-wd tr th{border-bottom:1px solid #e0ebff;}        .tables .pro-wd tr td{background-color:#fff;}        .pro-bt tr th{background-color:#fff;color:#333;border-bottom:1px solid #e0ebff;}        .pro-bt tr th.color{text-align:center;color:#246bba;}        .project-tb .project-downs-2{display:none;}        .project-tb .project-downs-2 td{background-color:#fffbf8;}        .project-tb .project-downs-3{display:none;}        .project-tb .project-downs-3 td{background-color:#FFF1F1;}        .project-tb .project-downs-4{display:none;}        .project-tb .project-downs-4 td{background-color:#FFF5F5;}        .project-tb .project-downs-5{display:none;}        .project-tb .project-downs-5 td{background-color:#FFF9F9;}        .project-tb .project-downs-6{display:none;}        .project-tb .project-downs-6 td{background-color:#f5eaea;}        .project-tb .project-downs-7{display:none;}        .project-tb .project-downs-7 td{background-color:#F7F7F7;}    </style></head><body><div class="tables">    <!--分项分部计价表-->    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="ellipsis-table fold-table">        <thead>        <tr>            <th width="7%">序号</th>            <th>项目编码</th>            <th>项目名称</th>            <th>项目特征</th>            <th>计量单位</th>            <th>工程数量</th>            <th width="13%">综合单位（元/单位）</th>            <th>合价（元）</th>            <th>人材机</th>            <th class="th" width="5%"><i class="jt-icon"></i></th>        </tr>        </thead>        <tbody class="project-tb">        <tr class="project-downs-1" name="1">            <td>1</td>            <td></td>            <td>控制中心TCC</td>            <td></td>            <td></td>            <td></td>            <td></td>            <td></td>            <td></td>            <td class="td-click td td-show-1"><i class="x-icon"></i></td>        </tr>        <tr class="project-downs-2" name="1.1">            <td>1.1</td>            <td></td>            <td>TCC变电所部分</td>            <td></td>            <td></td>            <td></td>            <td></td>            <td></td>            <td></td>            <td class="td-click td td-show-2"><i class="x-icon"></i></td>        </tr>        <tr class="project-downs-3" name="1.1.1">            <td>1.1.1</td>            <td>030201002001</td>            <td>变压器</td>            <td></td>            <td></td>            <td></td>            <td></td>            <td></td>            <td class="td-btn fold-btn"><a href="javascript:;" class="td-a">1<i class="t-icon"></i></a></td>            <td></td>        </tr>        <tr class="fold-tr project-downs-4" name="1.1.1.1">            <td colspan="10">                <div class="fold-detail">                    <table class="child-table table-border ellipsis-table" cellspacing="0" cellpadding="0" border="0" width="100%">                        <thead>                        <tr>                            <th>国际编号</th>                            <th>材料名称</th>                            <th>规格型号</th>                            <th>单位</th>                            <th>数量</th>                            <th>单价</th>                            <th>合价</th>                            <th>占比</th>                            <th>与上一阶段价格差</th>                        </tr>                        </thead>                        <tbody class="detail-content">                        <tr>                            <td>0801040010</td>                            <td>圆钢</td>                            <td>Ф16mm</td>                            <td>t</td>                            <td>1,234</td>                            <td>1,234</td>                            <td>1,234</td>                            <td>1,234</td>                            <td>1,234</td>                        </tr>                        </tbody>                    </table>                </div>            </td>        </tr>        <tr>            <td colspan="7" class="td-summary">分部分项工程费</td>            <td></td>            <td></td>            <td></td>        </tr>        </tbody>    </table></div><script src="../../../resources/js/min/jquery-1.9.1.min.js"></script><script>    $(function () {        $(document).on('click','.td-click',function(){            if(!$(this).children('i').hasClass('null-icon')){//如果无子节点无任何触发效果                var code=$(this).parents('tr').attr('name');//当去到当前的节点                var  i = $(this).attr("class").replace(/[^0-9]/ig,"");//将class中包含的数字拿出来判断是什么层级                if($(this).children('i').hasClass('jt-icon')){//如果包含jt-icon这个类就是点击时隐藏掉                    $(this).parents('tr').nextAll('tr[name^="'+code+'"]').hide().find('i').removeClass('jt-icon');                    $(this).parents('.project-tb').find('.t-icon').removeClass('b-icon');  //移除折叠表格图标                }else{//展开这个节点的下面的层级                    $(this).parents('tr').nextAll('tr[name^="'+code+'."][class="project-downs-'+(parseInt(i)+1)+'"]').show();                }                $(this).children('i').toggleClass('jt-icon');//切换图标            }        })    })</script></body></html>
阅读全文
0 0