可折叠的table表格

公司要求把表格改为可折叠的树结构，所以临时做的一个demo，考虑到整齐的问题，所以只在第一列做了个缩进，稍有不足请见谅

<title>jquery表格展开折叠代码</title>
<style>
*{ margin:0; padding:0; font-family:"微软雅黑"; font-size:12px;}
.big_table{ border:1px soild #EBEBEB;border-collapse:collapse;margin-top:200px;width:1400px;}
.inner_table{ border:1px soild #EBEBEB;border-collapse:collapse;width:1400px;}
td{ font:normal 12px/17px Arial;text-align:left;}
th{ font:bold 12px/17px Arial;text-align:left;border-bottom:1px solid #333;}
.big_table tr td:first-child{position:relative;}
/*.big_table tr th:first-child{width:20px;}*/
.some{ background:#EEEEEE;}
.odd{ background:#FFFFEE;}
.selected{ background:#FF6500;color:#fff;}
button {position: absolute;top:0px;cursor: pointer; width: 20px; height: 15px;text-indent: 100%;overflow: hidden; border: 0; background: transparent;text-align: center;}
button:before { content: '+'; display: block; width: 100%; text-align: center; text-indent: 0; }
button[state=close]:before { content: '-'; }
</style>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//  $('.big_table').children("tr:ood").css('background','red');
//  $('.big_table tr').eq(0).siblings().find(":odd").css('background','green');$('button').click(function(){   // 获取所谓的父行var $this = $(this).parents("tr");if($(this).attr("state")=="close"){$(this).attr("state","open");}else if($(this).attr("state")=="open"){$(this).attr("state","close");}var name = $this.attr("class");var tr_id = $this.attr("tr_id");$this.nextAll("tr[tr_id=table_"+tr_id+"]").toggle();  // 隐藏/显示所谓的子行});
})
</script>
</head>
<body>
<div style="width:1400px;margin:0 auto;"><table class="big_table"><colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup><thead><tr><th sytle="width:20px;"></th><th sytle="width:50px;">id</th><th sytle="width:60px;">名称</th><th>父级id</th><th>父级信息</th><th>层次级数</th><th>排列顺序</th><th>删除标志</th><th>是应用</th><th>需要权限</th><th>可用</th><th>isSys</th><th>目录路径</th><th>应用模板</th><th>模板名称</th><th>js文件</th></tr></thead><tbody><tr class="some" tr_id="1"><td><button state="close">content</button></td><td>1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr><tr tr_id="table_1"><td colspan="16"><table class="inner_table"><colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup><tbody><tr class="some" tr_id="1_1"><td><button style="left:15px;" state="close">content</button></td><td>　1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr><tr tr_id="table_1_1"><td colspan="16"><table class="inner_table"><colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup><tbody><tr tr_id="1_1"><td></td><td>　　1_1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr><tr tr_id="1_2"><td></td><td>　　1_2</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr></tbody></table></td></tr><tr tr_id="1_1"><td></td><td>　1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr><tr tr_id="1_2"><td></td><td>　1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr></tbody></table></td></tr><tr class="some" tr_id="2"><td><button state="close">content</button></td><td>1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr><tr tr_id="table_2"><td colspan="16"><table class="inner_table"><colgroup><col style="width: 20px;"><col style="width: 50px;"><col style="width: 80px;"><col style="width: 50px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 60px;"><col style="width: 80px;"><col style="width: 80px;"><col style="width: 80px;"></colgroup><tbody><tr tr_id="2_1"><td></td><td>　1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr><tr tr_id="2_2"><td></td><td>　1</td><td>系统应用管理</td><td></td><td>0</td><td>1</td><td>1</td><td>x</td><td>v</td><td>v</td><td>v</td><td>v</td><td>sysadmin/sys_app</td><td>tpl.html</td><td>main_frame</td><td>main_frame.js</td></tr></tbody></table></td></tr></tbody></table>
</div>
</body>
</html>

可折叠的table表格相关推荐

layui一个表格中怎么接两个接口的值_layer学习笔记之table表格引入数据实现分页...
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的 ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
ant design vue table 高度自适应_html之table表格
概述 html中提供了一个table表格的东西,不过到现在来说,用处基本上不是很大,但有些报表的项目中还是会用到的.此内容可以稍微一带而过,用到的时候,再回来复习也不迟.表格由 <table&g ...
vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...
html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间:2020-08-29 09:26:37 来源:脚本之家阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...
LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认 ...

可折叠的table表格

可折叠的table表格相关推荐

最新文章

热门文章