可折叠的table表格

最新推荐文章于 2024-06-23 18:01:24 发布
最新推荐文章于 2024-06-23 18:01:24 发布
阅读量6.1k 收藏 4
点赞数 2
分类专栏： 前端 文章标签： table 表格 可折叠 树结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrZive/article/details/78809615
版权

公司要求把表格改为可折叠的树结构，所以临时做的一个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>


MrZive
关注
专栏目录
可折叠的table html5,教你做一个可折叠的TableView
weixin_29197835的博客
05-31 536
写在开头首先，膜拜一下这位大神，Ramotion，自从在github上看到这个动画，惊为天人。心里不禁感叹，原来动画还可以这样做，可能是技术限制了我的想象力。于是乎，就一头扎进了这个项目里，看到issue里有很多人提出想要一个Tutorial和OC版本，决定边研究源码，边写一个OC版本，毕竟代码还是要自己码一遍可以学的更快。文章结尾会放出OC版本的链接，如果想要swift版本的Demo，可以直接去...
javascript 实现table展开折叠
10-24
javascript 实现table展开折叠,table的th部分不变，下端的tr折叠
实现一个可无限折叠的table
weixin_34272308的博客
11-11 462
前言 如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图： 其实这个项目在两个月以前就以上上传在github了，但当时没有写详细的实现过程。自己前几天发表的一篇技术贴当下拉列表数据过大时，该如何应对？得到大家的不少支持，犹如歌曲《红日》里的歌词像红日之火 点燃真的我~ 所以继续为掘金社区做奉献自己微不足道的力量啦 ~~ 在周末听着嗨歌写文还是很nice的~ 嗨...
示例:WPF中推荐一个支持折叠展开的GridSpliter自定义控件GridSplitterBox
最新发布
HeBianGu的博客
06-23 786
包：H.Controls.FilterColumnDataGrid。
table 折叠行的实现
dzf203的专栏
06-16 2036
最终效果如下图所示：     $(function() {         bindToggle();     });     // 点击栏目展开或折叠     function bindToggle() {         $(".checkboxedittable").toggle(         func
table行的折叠和展开
热门推荐
是一座岛
09-14 2万+
1.效果图 2.html <col style="width:100px;"> 编号 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 123 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 编号 入院时间 离院时间 在
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
layui树型可折叠表格.zip
05-26
可以在这里查看下是否需要:...有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
foldable-table-js:可折叠表格Javascript小部件
05-14
折叠桌 给定一个数据集： const data = [ { id: "foo-bee-laa" , url: "http://example.com/foo/bee/laa" , data: [120 , 235 , 482320 , ] } , { id: "foo-bee-ooo" , url: ...
JQuery实现table行折叠效果以JSON做数据源
12-03
接下来，我们需要创建一个表格，并为每个可折叠行添加一个特殊的类或者标识。假设我们的表格结构如下： ```html <table id="myTable"> <!-- 表格数据 --> </table> ``` 然后，我们可以定义一个JSON数组来存储数据...
Table折叠小技巧html-demo
weixin_33857230的博客
10-16 2037
1.要做一个table折叠的展示文本框直接上代码 html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;table-折叠测试&lt;/title&gt; &lt;script type="text/javascript" src="http://libs.baidu.com/jquery/2.1
html5折叠表格
10-25
html5折叠表格
TreeTable,用于展开/折叠table的行
05-22
TreeTable,用于展开/折叠table的行:比如,类别展示
jQuery实现报表的折叠效果（可填报）
weixin_34391445的博客
06-25 214
一：折叠报表两种实现方案 折叠报表在BS项目有着广泛的应用，在公司内部，报表工具在解决折叠报表时通常有两种方案： 1） 利用报表工具的隐藏行属性，通过传递参数刷新报表实现。 2） 通过jQuery的show(),hide()方法对报表进行tr的显示，隐藏操作。 二：两种折叠方案的对比 第一种折叠方案: 优点：js方法比较简单。 缺点：无法进行填报，每次折叠...
table折叠表格边框
生活在继续
01-22 1448
style="border-collapse: collapse"   table折叠表格边框，表格边框更美观
html 表格折叠效果,JQuery实现table行折叠效果以JSON做数据源
weixin_39782709的博客
05-31 268
Array.prototype.filterRepeat = function () {var res = [], hash = {};for (var i = 0, elem; (elem = this[i]) != null; i++) {if (!hash[elem]) {res.push(elem);hash[elem] = true;}}return res;}$(function ()...
Antd4 Table组件折叠收缩功能
Dandelion529_66的博客
09-16 2886
Antd4 Table组件折叠收缩功能
简单实现tableView折叠列表
u013770512的专栏
03-31 1606
折叠列表在以文字内容为主的网站上很常见，主要用于对导航连接进行分类，包含一个分段列表，每个分段下有一些子选项，可以展开各个子项，也可以关闭，现在来设计一个这样的列表，首先需要建一个View用来响应点击事件的（展开列表 关闭列表）在这个过程中表视图控制器会做两件事：1更新模型及更新数据  2更新表视图 可以把点击的分段保存下来，作为当前的展开索引 之后可以刷新列表   方法有两种：1reloadDa
vxe-table 实现折叠表格
是秃子总会发光
11-10 1012
vxe-table 实现折叠表格
JS 表格可折叠显示
07-27
在上面的示例中，我们使用了一个CSS类名 `.foldable-row` 来标识可折叠的行。通过设置该类的 `display` 属性为 `none`，我们将这些行默认隐藏起来。然后，通过JavaScript代码为这些行添加点击事件监听器，当用户点击...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值