[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>
[jquery]折叠指定条件的表格的更多相关文章
- JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)
1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
- 第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件
jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的 ...
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jquery实现多条件筛选特效代码分享
本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下:jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点. ...
- 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- 利用jquery给指定的table动态添加一行、删除一行,复制,值不重复等操作
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...
- sql 根据指定条件获取一个字段批量获取数据插入另外一张表字段中+MD5加密
/****** Object: StoredProcedure [dbo].[getSplitValue] Script Date: 03/13/2014 13:58:12 ******/ SET A ...
随机推荐
- 【原】python中文文本挖掘资料集合
这些网址是我在学习python中文文本挖掘时觉得比较好的网站,记录一下,后期也会不定期添加: 1.http://www.52nlp.cn/python-%E7%BD%91%E9%A1%B5%E7% ...
- JavaScript 特殊对象 Array-Like Objects 详解
这篇文章拖了有两周,今天来跟大家聊聊 JavaScript 中一类特殊的对象 -> Array-Like Objects. (本文节选自 underscore 源码解读系列文章,完整版请关注 h ...
- 在openwrt装ipk包
用到putty终端和winsp两个软件 其中winsp是连接上192.168.1.1(文件协议选SCP),然后将ipk包放进去 然后用putty进入192.168.1.1 @root账号密码填完--- ...
- VMware网络设置详解
标签: 网络vmware虚拟机web服务network 2009-05-19 22:23 27537人阅读 评论(7) 收藏 举报 分类: 基于类linux的开发(171) 我们知道,VMwareWo ...
- K-means聚类算法
聚类分析(英语:Cluster analysis,亦称为群集分析) K-means也是聚类算法中最简单的一种了,但是里面包含的思想却是不一般.最早我使用并实现这个算法是在学习韩爷爷那本数据挖掘的书中, ...
- jinfo_动态调整JVM参数(无需重启)(实践)
本文演示在JVM进程运行过程中动态开启/关闭 GC输出,无需重启JVM进程 jinfo使用介绍 可以用来查看正在运行的Java应用程序的扩展参数,甚至支持在运行时,修改部分参数 -flag < ...
- 数据结构图文解析之:哈夫曼树与哈夫曼编码详解及C++模板实现
0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...
- 【BZOJ-3553】三叉神经树 树链剖分
3553: [Shoi2014]三叉神经树 Time Limit: 160 Sec Memory Limit: 256 MBSubmit: 347 Solved: 112[Submit][Stat ...
- for循环递归树
protected string _menu = string.Empty; public void FirstAnsyData() { try { // List<object> lsN ...
- Linux ip
工具/原料 linux系统 putty 方法/步骤 Linux下查看IP一般都是用命令在终端查看了,使用命令行来进行查看. 想要在图形界面查看的朋友也有办法,不过就比较复杂,不如一条命令来得痛 ...