二层树状数据展示附带样式全选

最新推荐文章于 2022-12-06 15:06:44 发布

Thekingyu

最新推荐文章于 2022-12-06 15:06:44 发布

阅读量354

点赞数

分类专栏：前端样式文章标签： jquery css

本文链接：https://blog.csdn.net/thekingyu/article/details/78533602

版权

前端样式专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}		
		ul {
			list-style: none;
		}		
		.table-head {
			width: 100%;
			background: red;
		}		
		.table-head p {
			float: left;
			background: #f3f3f3;
			line-height: 40px;
		}		
		.table-head p:nth-child(1) {
			width: 10%;
		}		
		.table-head p:nth-child(2) {
			width: 15%;
		}		
		.table-head p:nth-child(3) {
			width: 35%;
		}		
		.table-head p:nth-child(4) {
			width: 25%;
		}		
		.table-head p:nth-child(5) {
			width: 15%;
		}		
		.table-body {
			width: 100%;
			background: red;
			overflow: hidden;
			background: #fff;
			border: 1px solid #ccc;
		}		
		.table-body p {
			float: left;
			background: #fff;
			line-height: 40px;
		}		
		.table-body p:nth-child(1) {
			width: 5%;
		}		
		.table-body p:nth-child(2) {
			width: 5%;
			text-align: center;
		}		
		.table-body p:nth-child(3) {
			width: 15%;
		}		
		.table-body p:nth-child(4) {
			width: 35%;
		}		
		.table-body p:nth-child(5) {
			width: 25%;
		}		
		.table-body p:nth-child(6) {
			width: 15%;
		}		
		.table-foot {
			width: 100%;
			background: red;
			overflow: hidden;
			background: #fbfbfb;
		}		
		.table-foot p {
			float: left;
			background: #;
			line-height: 40px;
		}		
		.table-foot p:nth-child(1) {
			width: 5%;
		}		
		.table-foot p:nth-child(2) {
			width: 5%;
		}		
		.table-foot p:nth-child(3) {
			width: 15%;
			margin-left: 10%;
			border-bottom: 1px solid #ccc;
		}		
		.table-foot p:nth-child(4) {
			width: 35%;
			border-bottom: 1px solid #ccc;
		}		
		.table-foot p:nth-child(5) {
			width: 25%;
			border-bottom: 1px solid #ccc;
		}		
		.table-foot p:nth-child(6) {
			width: 15%;
			border-bottom: 1px solid #ccc;
		}		
		.batch {
			margin-left: 20%;
			display: inline-block;
			width: 20px;
			height: 20px;
			border: 1px solid #333333;
			border-radius: 4px;
			margin-top: -10px;
		}		
		.batch1 {
			margin-left: 40%;
			display: inline-block;
			width: 20px;
			height: 20px;
			border: 1px solid #333333;
			border-radius: 4px;
			margin-top: -10px;
			overflow: auto;
		}		
		.activ {
			background: url(timg.jpg) no-repeat center center;
			background-size: 20px;
		}		
		.lot-size {
			background: red;
			font-size: 14px;
			color: #666;
			min-width: 760px;
		}
	</style>

	<body>
		<div>
			<ul class="lot-size">
				<div class="table-head">
					<p>
						<span class="batch"></span>
					</p>
					<p>设备分类（编码）</p>
					<p>分类说明</p>
					<p>添加时间</p>
					<p>操作</p>
				</div>
<!--遍历以下-->
				<div class="table-body">
					<p>
						<span class="batch1"></span>
					</p>
					<p class="one">+</p>
					<p>压力机</p>
					<p>压力机分类</p>
					<p>1</p>
					<p>编辑删除</p>
				</div>
				<li class="two">
					<div class="table-foot">
						<p> </p>
						<!--不能删-->
						<p> </p>
						<p>压力机</p>
						<p>压力机分类</p>
						<p>1</p>
						<p>编辑删除</p>
					</div>
				</li>
				
				
								<div class="table-body">
					<p>
						<span class="batch1"></span>
					</p>
					<p class="one">+</p>
					<p>压力机</p>
					<p>压力机分类</p>
					<p>1</p>
					<p>编辑删除</p>
				</div>
				<li class="two">
					<div class="table-foot">
						<p> </p>
						<!--不能删-->
						<p> </p>
						<p>压力机</p>
						<p>压力机分类</p>
						<p>1</p>
						<p>编辑删除</p>
					</div>
					<div class="table-foot">
						<p> </p>
						<!--不能删-->
						<p> </p>
						<p>压力机</p>
						<p>压力机分类</p>
						<p>1</p>
						<p>编辑删除</p>
					</div>
				</li>
<!--遍历以上	-->			
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		$(".one").click(function() {
			console.log(1)
			if($(this).parent().next().css('display') == 'none') {
				$(this).parent().next().show()
				$(this).html("-")
			} else {
				$(this).parent().next().hide()
				$(this).html("+")
			}
		})
		$('.batch1').click(function() {
			if($(this).hasClass('activ')) {
				$(this).removeClass('activ')
			} else {
				$(this).addClass('activ')
			}
		})
		$('.batch').click(function() {
			if($(this).hasClass('activ')) {
				$(this).removeClass('activ')
				$('.batch1').removeClass('activ')
			} else {
				$(this).addClass('activ')
				$('.batch1').addClass('activ')
			}
		})
	</script>
</html>

Thekingyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二层树状数据展示附带样式全选

* { margin: 0; padding: 0; } ul { list-style: none; } .table-head { width: 100%; background: red; } .table-head p { float: left; background: #f3f3f3; line-hei
复制链接

扫一扫