[jquery]折叠指定条件的表格

最近在做财务报表时候，一些表格要做特定折叠效果

这里通过2个自定义属性来对表格之间的属性作关联

date-head和date-num，输出表格时候，可以按照这2个自定义属性给某些带父子层级关系的内容指定关联关系

再通过jquery获取这些具有相当关联关系的表格作出折叠效果

效果图

先上jquery

$(document).ready(function(e) {

    $(".table").find(".head").each(function() {
        $(this).find("td:nth-child(2)").click(function(){
            var head = $(this).parents("tr").attr("date-head");
            $(".table").find(".close").each(function(){
                var num = $(this).attr("date-num");
                if(head == num){
                    if($(this).css("display")=="none"){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                }
            });
                
        })
    });
        
});

 

css代码

body{background-color:#e0e0e0;}
.main{width:600px; min-height:300px; border: 10px solid #666; margin:0 auto; background-color:#FFF; border-radius:3px; overflow-y:auto; padding:0; margin-bottom:20px;}
.table{width:100%; padding:0; margin:0;}
.table tr td{border:1px solid #ccc; width:33.33%;}
.table tr:nth-child(1) td,.table tr:nth-child(4) td,.table tr:nth-child(7) td{background-color:#FCF;}

 

html代码

<div class="main">

    <table class="table" border="0" cellspacing="1" cellpadding="0" >
        <thead>
          <tr>
            <th class="text-center">序号</th>
            <th class="text-center">菜单名称</th>
            <th class="text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr class="head" date-head="1">
            <td>1</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close" date-num="1" style="display:none">
            <td>2</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close" date-num="1" style="display:none">
            <td>3</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="head" date-head="2">
            <td>4</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close" date-num="2" style="display:none">
            <td>5</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close" date-num="2" style="display:none">
            <td>6</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="head"  date-head="3">
            <td>7</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close" date-num="3" style="display:none">
            <td>8</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close" date-num="3" style="display:none">
            <td>9</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close">
            <td>10</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close">
            <td>11</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
          <tr class="close">
            <td>12</td>
            <td>销售管理</td>
            <td>下移</td>
          </tr>
        </tbody>
      </table>
</div>