关闭

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

标签: jquerycss
73人阅读 评论(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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1030次
    • 积分:125
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档