三层可折叠table

最新推荐文章于 2024-07-03 10:36:14 发布
原创 最新推荐文章于 2024-07-03 10:36:14 发布 · 1.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web

这篇博客介绍了如何使用JavaScript实现三层可折叠的表格功能。通过点击图片触发事件，改变图片旋转角度并切换相应表格行的显示状态，实现了表格的展开和收起效果。涉及CSS3的transform属性以及DOM操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

table.js


table.css

@CHARSET "UTF-8";

* {
	margin: 0;
	padding: 0;
}

body {
	padding: 10px 10px;
}

.demo {
	width: 600px;
	margin: 40px auto;
	font-family: 'trebuchet MS', 'Lucida sans', Arial;
	font-size: 14px;
	color: #444;
}

table {
	*border-collapse: collapse; /* IE7 and lower */
	border-spacing: 0;
	width: 100%;
	margin-top: 10px;
}
/*========bordered table========*/
.bordered {
	border: solid #ccc 1px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 1px #ccc;
	-moz-box-shadow: 0 1px 1px #ccc;
	box-shadow: 0 1px 1px #ccc;
}

.bordered tr {
	-o-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.bordered .highlight, /* .bordered tr:hover {
				background: #fbf8e9;		
			} */ .bordered td,.bordered th {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	padding: 10px;
	text-align: left;
}

.bordered th {
	background-color: #FBFBFC;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FBFBFC),
		to(#FBFBFC) );
	background-image: -webkit-linear-gradient(top, #FBFBFC, #FBFBFC);
	background-image: -moz-linear-gradient(top, #FBFBFC, #FBFBFC);
	background-image: -ms-linear-gradient(top, #FBFBFC, #FBFBFC);
	background-image: -o-linear-gradient(top, #FBFBFC, #FBFBFC);
	background-image: linear-gradient(top, #FBFBFC, #FBFBFC);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
		startColorstr=#ebf3fc, endColorstr=#dce9f9 );
	-ms-filter:
		"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9)";
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	border-top: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.bordered td:first-child,.bordered th:first-child {
	border-left: none;
}

.bordered th:first-child {
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}

.bordered th:last-child {
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
	border-radius: 0 10px 10px 0;
}

.bordered tr:last-child td:first-child {
	-moz-border-radius: 0 0 0 10px;
	-webkit-border-radius: 0 0 0 10px;
	border-radius: 0 0 0 10px;
}

.bordered tr:last-child td:last-child {
	-moz-border-radius: 0 0 10px 0;
	-webkit-border-radius: 0 0 10px 0;
	border-radius: 0 0 10px 0;
}
/*----------------------*/
.zebra td,.zebra th {
	padding: 10px;
	border-bottom: 1px solid #f2f2f2;
}

.zebra .alternate,.zebra tbody tr:nth-child(even) {
	background: #f5f5f5;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}

.zebra th {
	text-align: left;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
	border-bottom: 1px solid #ccc;
	background-color: #eee;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5),
		to(#eee) );
	background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
	background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
	background-image: -ms-linear-gradient(top, #f5f5f5, #eee);
	background-image: -o-linear-gradient(top, #f5f5f5, #eee);
	background-image: linear-gradient(top, #f5f5f5, #eee);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
		startColorstr=#f5f5f5, endColorstr=#eeeeee );
	-ms-filter:
		"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee)";
}

.zebra th:first-child {
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}

.zebra th:last-child {
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
	border-radius: 0 10px 10px 0;
}

.zebra tfoot td {
	border-bottom: 0;
	border-top: 1px solid #fff;
	background-color: #f1f1f1;
}

.zebra tfoot td:first-child {
	-moz-border-radius: 0 0 0 10px;
	-webkit-border-radius: 0 0 0 10px;
	border-radius: 0 0 0 10px;
}

.zebra tfoot td:last-child {
	-moz-border-radius: 0 0 10px 0;
	-webkit-border-radius: 0 0 10px 0;
	border-radius: 0 0 10px 0;
}

/////////////////////////////////////////////////////
.img_css {
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 3px;
}

table.html

<!DOCTYPE html>
<html>
  <head>
    <title>table.html</title>
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
	<link rel="stylesheet" href="css/table.css" type="text/css"></link>
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  	<script type="text/javascript" src="js/table.js"></script>
  </head>
  
  <body>
    <table class="bordered">
		<thead>
			<tr id="title1">
				<th colspan="2">[3号线]</th>        
			    <th style="text-align: right; border-left: none; width: 15%;">
			    	 <img id="img_title1" width="27" src="images/u122.png" class="img_title_css" />
			    	 <!-- <span id="span_title1"  width="5" style="visibility: hidden;">0</span> -->
			    	 <span id="span_title1"  width="5" style="display: none;">0</span>
			    </th>
			</tr>
		</thead>
		<tbody id="tbody_title1" style="display:null;">
			<tr class="parent" id="row123">
				<td colspan="2" style="width: 85%;">高新区间</td>
				<td style="text-align: right; border-left: none; width: 15%;">
					<img id="img_row123" width="27" src="images/u122.png" class="img_css" />
					<span id="span_row123" style="display: none;">0</span>
				</td>
			</tr>
			<tr class="child-row123">
				<td style="width: 30%;">1</td>        
			    <td style="width: 40%;">The Shawshank Redemption</td>
			    <td style="width: 30%;">1994</td>
			</tr>        
			<tr class="child-row123">
				<td>2</td>         
			    <td>The Godfather</td>
			    <td>1972</td>
			</tr>
			<tr class="parent" id="row456">
				<td colspan="2" style="width: 66.7%;">珉良区间</td>
				<td style="text-align: right; border-left: none; width: 15%;">
					<img id="img_row456" width="27" src="images/u122.png" class="img_css" />
					<span id="span_row456" style="display: none;">0</span>
				</td>
			</tr>
			<tr class="child-row456">
				<td>1</td>        
			    <td>The Shawshank Redemption</td>
			    <td>1994</td>
			</tr>        
			<tr class="child-row456">
				<td>2</td>         
			    <td>The Godfather</td>
			    <td>1972</td>
			</tr>
		</tbody>
	</table>
	<table class="bordered">
		<thead>
			<tr id="title2">
				<th colspan="2">[3号线]</th>        
			    <th style="text-align: right; border-left: none; width: 15%;">
			    	 <img id="img_title2" width="27" src="images/u122.png" class="img_title_css" />
			    	 <!-- <span id="span_title1"  width="5" style="visibility: hidden;">0</span> -->
			    	 <span id="span_title2"  width="5" style="display: none;">0</span>
			    </th>
			</tr>
		</thead>
		<tbody id="tbody_title2" style="display:null;">
			<tr class="parent" id="row1231">
				<td colspan="2" style="width: 85%;">高新区间</td>
				<td style="text-align: right; border-left: none; width: 15%;">
					<img id="img_row1231" width="27" src="images/u122.png" class="img_css" />
					<span id="span_row1231" style="display: none;">0</span>
				</td>
			</tr>
			<tr class="child-row1231">
				<td style="width: 30%;">1</td>        
			    <td style="width: 40%;">The Shawshank Redemption</td>
			    <td style="width: 30%;">1994</td>
			</tr>        
			<tr class="child-row1231">
				<td>2</td>         
			    <td>The Godfather</td>
			    <td>1972</td>
			</tr>
			<tr class="parent" id="row4561">
				<td colspan="2" style="width: 85%;">珉良区间</td>
				<td style="text-align: right; border-left: none; width: 15%;">
					<img id="img_row4561" width="27" src="images/u122.png" class="img_css" />
					<span id="span_row4561" style="display: none;">0</span>
				</td>
			</tr>
			<tr class="child-row4561">
				<td>1</td>        
			    <td>The Shawshank Redemption</td>
			    <td>1994</td>
			</tr>        
			<tr class="child-row4561">
				<td>2</td>         
			    <td>The Godfather</td>
			    <td>1972</td>
			</tr>
		</tbody>
	</table>
  </body>
</html>





可折叠的table html5,教你做一个可折叠的TableView
weixin_29197835的博客
05-31 623
写在开头首先，膜拜一下这位大神，Ramotion，自从在github上看到这个动画，惊为天人。心里不禁感叹，原来动画还可以这样做，可能是技术限制了我的想象力。于是乎，就一头扎进了这个项目里，看到issue里有很多人提出想要一个Tutorial和OC版本，决定边研究源码，边写一个OC版本，毕竟代码还是要自己码一遍可以学的更快。文章结尾会放出OC版本的链接，如果想要swift版本的Demo，可以直接去...
【IOS】Swift编写可折叠的tableView
WHUZXQ的博客
03-14 2506
Swift编写可折叠的tableView
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: "http://example.com/foo/bee/ooo" , data: [151 , 342 , 230215 , ] } , { id: "foo-gee-sii" , url: "http://example.com/foo/gee/sii" , data: [25 , 35 , 302155 , ] } , { id: "boo-zee-laa" , url: "http://example.com/
element treeTable 全部展开折叠、分级展开折叠
qq_25131799的博客
12-06 2702
可折叠的table html5,table的HTML5+css3的可用样式
weixin_39707725的博客
05-31 197
table {*border-collapse: collapse; /* IE7 and lower */border-spacing: 0;width: 100%;}.bordered {border: solid #ccc 1px;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;-webkit-box...
可折叠的table html5,table的HTML5+css3的可用式样
weixin_36296325的博客
05-31 126
table的HTML5+css3的可用样式table {*border-collapse: collapse; /* IE7 and lower */border-spacing: 0;width: 100%;}.bordered {border: solid #ccc 1px;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-ra...
el-table 树状表格展开及折叠
最新发布
sinat_34896766的博客
07-03 1527
【代码】el-table 树状表格展开及折叠。
TreeTable,用于展开/折叠table的行
05-22
在"TreeTable,用于展开/折叠table的行:比如,类别展示"这个例子中，我们可以理解到TreeTable主要被用来展示具有分类关系的数据。例如，一个电子商务平台可能需要展示商品分类，其中每个大类下面又包含多个子类，...
js可折叠商品类别动态三级滑动菜单
yibingde的专栏
07-29 1073
js商品类别
【前端组件复用术】：创建可复用的Bootstrap table多层表头组件
[【前端组件复用术】：创建可复用的Bootstrap table多层表头组件](https://static.shuffle.dev/components/preview/b9f9fb5d-8779-4689-b779-1b7f24338c40/features/11_3ff674776c.png) # 摘要 前端组件复用是提高...
javascript 实现table展开折叠
10-24
javascript 实现table展开折叠,table的th部分不变，下端的tr折叠
css折叠表格
低调哥的博客
02-11 2220
1.html&lt;div class="custom-fold-table"&gt; &lt;table cellpadding="0" cellspacing="0" width="100%" class="ellipsis-thead custom-table last-column-center table-border"&gt; &lt;th
table行的折叠和展开
热门推荐
是一座岛
09-14 2万+
1.效果图 2.html <col style="width:100px;"> 编号 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 123 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 编号 入院时间 离院时间 在
折叠table中的tr
weixin_30314631的博客
09-30 384
code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .chartTable{ width:100%;...
vue+element动态生成可折叠表格
qq_37049128的博客
09-30 2697
最近看到很多人问怎么样做多层可折叠表格，其实vue+element是很简单实现的，就是数据结构的问题， 使用element table组件的树形数据与懒加载，实现代码如下(主要是数据的处理，跟后端同事协调好返回的数据结构，或者前端做数据处理都是可以的) <template> <div> <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key=.
html tr可以折行样式,css实现表格td 自动换行样式
weixin_39631350的博客
06-18 750
自动换行最简单的做法就是直接使用word-wrap: break-word;word-break:break-all;了，这种对于ie浏览器是兼容的，但对于ff或其它浏览器好像有问题，下面一起来看看。给长地址的单元格应用样式：代码如下word-wrap: break-word;word-break:break-all;对于div1.(IE浏览器)white-space:normal; word-b...
vue使用Element的el-table实现表格嵌套及表格内容的折叠效果
weixin_42841605的博客
06-29 1万+
vue+element，使用el-table实现表格嵌套及表格内容的折叠收起效果
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
蓝胖子的博客
12-06 2万+
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
结合element完成分列分级树形折叠分级表单
qq_46608252的博客
03-11 882
原生HTML完成树形折叠分级表单
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值