关闭

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

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

四层树状数据展示,无样式

ul{ list-style: none; } .two{ display: none; } .three{ display: none; } .four{ display: none; } 第一层...
  • Thekingyu
  • Thekingyu
  • 2017-11-14 18:46
  • 195

树形数据展示

点击打开链接
  • u013224148
  • u013224148
  • 2015-04-21 19:21
  • 1775

ABAP ALV代替ALV TREE显示层级关系

ABAP ALV代替ALV TREE显示层级关系
  • SAPmatinal
  • SAPmatinal
  • 2015-09-10 17:34
  • 701

关于css中树形的开闭以及复选框checkbox如何全选取消的实现

document示例--树状展开和关闭 function test1_onclick(){ if(test1.innerText=="-"){ myList.style.display="none"; test1.innerText=&qu...
  • hll174
  • hll174
  • 2014-10-03 20:55
  • 549

CSS设计表格(上)--样式设计及全选功能

前言     本章主要设计一个简单大方的表格,因为在写后台的时候,统计用户信息等需要用到表格,所以就采用如下样式的表格,鼠标移过的地方变色,支持全选         本章代码点此下载 样式表格   table.html内容 ...
  • mybelief321
  • mybelief321
  • 2015-12-12 23:45
  • 1342

HTML之Table简约时尚CSS样式 + HTML中checkbox元素【全选】或【取消全选】、或得到选中个数全案例使用详解

先看看效果: 【未选择状态】 【选中状态】 【源代码】 PIAD-MS | IndexTop .main { padding:0; width:100%; margin:0px 0px 0px...
  • FOR_CHINA2012
  • FOR_CHINA2012
  • 2013-07-12 10:27
  • 2799

每页展示固定条数据的单选本页选择和全选的逻辑及js代码实现

逻辑: 1.全选:勾选时,本页勾选,单选全部勾选;取消勾选时,本页取消勾选,单选全部取消勾选 2.本页:勾选时,单选全部勾选,若勾选总数等于查询结果总数,全选也勾选;取消勾选时,本页全部取消勾选,全选取消勾选 3.单选:勾选时,判断已勾选条数,若等于本页总数,则本页勾选,若等于查询结果总数,则全选勾...
  • jida620
  • jida620
  • 2014-12-08 09:42
  • 694

JavaScript——DOM或以树形展示的Web页面

Web网页的一般可以通过document以及document所相关的各种元素组成。当然我们也可以通过层次结构的树形结构在展现Web页面。如果要对一个网页进行修改的话,我们可以通过document对象,Node对象以及Element对象进行相关的操作。 【Document对象】是所有页面元素的所有者...
  • jsdchenye
  • jsdchenye
  • 2015-07-24 18:25
  • 499

AppCan TreeView

APPCAN 中使用 TreeView 展示数据
  • hds769964581
  • hds769964581
  • 2017-07-31 11:22
  • 201

使用ztree插件实现前端树状结构

实现树状的前端界面呈现,可以使用jquery的ztree插件来实现
  • uestc_lxp
  • uestc_lxp
  • 2015-05-18 10:33
  • 580
    个人资料
    • 访问:4327次
    • 积分:396
    • 等级:
    • 排名:千里之外
    • 原创:35篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条