正文
[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:; margin-bottom:20px;}
.table{width:100%; padding:; margin:;}
.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>
