标签：
最近在做财务报表时候，一些表格要做特定折叠效果
这里通过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>
标签：
原文地址：http://www.cnblogs.com/zhixi/p/5467036.html
