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

来源：互联网发布：如何卖数据编辑：程序博客网时间：2024/06/08 03:03
<!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