折叠table中的tr
2024-08-25 16:03:29
- code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.chartTable{
width:100%;
margin-top:10px;
}
.chartTable th,.chartTable td{
text-align: center;
padding:10px 0;
}
.chartTable th{
background-color:#D7D7D7 ;
}
td.company{text-align: left;}
td.haschild .c_title{cursor: pointer;background: url(http://note.youdao.com/yws/public/resource/a5dec28b4c472b42d7126f3a389e3f28/xmlnote/531FC34716824BE5A6ABD0451F9FDBF0/WEBRESOURCE978aa3969c38110736f0c17a178b04b6/7204) no-repeat; background-size: 20px 20px;background-position: center left;}
td.isopen .c_title{cursor: pointer;background: url(http://note.youdao.com/yws/public/resource/a5dec28b4c472b42d7126f3a389e3f28/xmlnote/531FC34716824BE5A6ABD0451F9FDBF0/WEBRESOURCEed4cebea2ccd991c3265d5a7dd90d0e3/7205) no-repeat; background-size: 20px 20px;background-position: center left;}
.c_title{padding-left:20px;margin-top:0;margin-bottom:0;}
.haschild .c_icon{height:20px;width:20px;float:left}
.level_0 .company .c_title{margin-left:0; color:red;}
.level_1{display:none;}
.level_2{display:none;}
.level_3{display:none;}
.level_1 .company .c_title{margin-left:20px;color:blue;}
.level_2 .company .c_title{margin-left:40px;color:green;}
.level_3 .company .c_title{margin-left:60px;color:#ccc;}
</style>
</head>
<body>
<table class="chartTable" border="1" id="chartTable">
<tr>
<th rowspan="3">销售企业</th>
<th colspan="6">工业（吨）</th>
</tr>
<tr>
<th colspan="2">岩石</th>
<th colspan="2">岩石</th>
<th colspan="2">合计</th>
</tr>
<tr>
<th>数量</th>
<th>比重</th>
<th>数量</th>
<th>比重</th>
<th>数量</th>
<th>比重</th>
</tr>
<tr class="level_0">
<td class="company haschild"><p class="c_title">明华公司0</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_1">
<td class="company haschild"><p class="c_title"><p class="c_title">明华公司01</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_2">
<td class="company haschild"><p class="c_title"><p class="c_title">明华公司0101</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_3">
<td class="company"><p class="c_title"><p class="c_title">明华公司011111111101</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_1">
<td class="company"><p class="c_title"><p class="c_title">明华公司02</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class=" level_0">
<td class="company"><p class="c_title">明华公司1</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_0">
<td class="company haschild"><p class="c_title">明华公司0</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_1">
<td class="company haschild"><p class="c_title"><p class="c_title">明华公司01</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_2">
<td class="company"><p class="c_title"><p class="c_title">明华公司0101</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_1">
<td class="company"><p class="c_title"><p class="c_title">明华公司02</p></td>
<td>100</td>
<td>50%</td>
<td>100</td>
<td>50%</td>
<td>200</td>
<td>33.333%</td>
</tr>
<tr class="level_0">
<td>合计</td>
<td>300</td>
<td>50%</td>
<td>300</td>
<td>50%</td>
<td>600</td>
<td>100%</td>
</tr>
</table>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".haschild").click(function(){
console.log(this);
var cls = $(this).parent().attr("class");
var childClassName = cls.substring(0,6)+(parseInt(cls.substring(6,7))+1);
var arr = $(this).parent().nextUntil('.'+cls);
if($(this).attr("class").indexOf("isopen")>=0){//关闭
$(this).removeClass("isopen");
$(arr).each(function(index,element){
$(element).find(".company").removeClass("isopen");
$(element).hide();
})
}else{//打开
$(this).addClass("isopen");
$(arr).each(function(index,element){
if($(element).attr("class")==childClassName){
$(element).show();
}
})
}
});
</script>
</body>
</html>
- effects
最新文章
- XStream将java对象转换为xml时，对象字段中的下划线“_”，转换后变成了两个的解决办法
- 类型基础---CLR Via C#笔记一
- java核心技术第一卷
- REST API出错响应的设计
- Combination Sum III
- libgo 2.0发布
- Tomcat提示Null component
- 开放计算平台——数据仓库（Hive）权限控制
- 将图片转换为base64 格式
- Log4j 2翻译 Garbage-free Steady State Logging（稳定的以不会生成垃圾的状态来记录日志）
- python如何讲一个文件中的图片分到两个
- 吾八哥学Selenium(三)：操作复选框checkbox/单选框radio的方法
- Java Design Patterr
- [java,2017-12-01] 播放音频文件
- SharePoint 设置客户端上传文件大小
- 如何在O(n)的时间复杂度内找出数组中出现次数超过了一半的数
- SOA面向服务架构——SOA的概念
- BugPhobia回顾篇章：团队Alpha阶段工作分析
- php 如何得到不含前导0的时分秒
- EAS常用工具类