折叠table中的tr
- 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
折叠table中的tr的更多相关文章
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...
- [转]table中设置tr行间距
原文地址:https://blog.csdn.net/itmyhome1990/article/details/50475616 CSS border-collapse 属性设置表格的边框是否被合并为 ...
- table 中的tr 行点击 变换颜色背景
<style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...
- table中设置tr行间距
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值 描述 separate 默认值.边框会被分开.不会忽略 border-spacing 和 empty-cell ...
- table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...
- js的传值，table中tr的遍历，js中动态创建数组
1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...
- vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th
本次示例效果如下: TextBox1中输入如下字符串: 12<table><tbody><tr><td>1<br/>11</td> ...
- table中tr使用toggle不好，选择换一张方式
好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...
随机推荐
- Onvif开发之服务端成功对接Rtsp视频流篇
前面篇介绍onvif服务端的发现功能,继续在之前的代码基础上完成一个RTSP流的工作,也就是客户端通过ONVIF协议来预览设备端在这个之前必须确定几个简单的条件1 设备端能被发现2 设备端支持RTSP ...
- CSS动态实现文本框清除按钮的隐藏与显示
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视):FireFox浏览器貌似任何类型的输入框都无动于衷 ...
- BZOJ 2037 区间DP
跟POJ 3042是一个类型的http://blog.csdn.net/qq_31785871/article/details/52954924 思路: 先排个序 (把初始位置也插进去) f[i][j ...
- Android Gson解析json工具类封装
package com.springSecurity.gson; import java.util.ArrayList; import java.util.List; import java.util ...
- jquery实现瀑布流效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HDU 4731 Minimum palindrome 打表找规律
http://acm.hdu.edu.cn/showproblem.php?pid=4731 就做了两道...也就这题还能发博客了...虽然也是水题 先暴力DFS打表找规律...发现4个一组循环节.. ...
- chkconfig---检查设置系统服务
chkconfig命令 chkconfig命令检查.设置系统的各种服务.这是Red Hat公司遵循GPL规则所开发的程序,它可查询操作系统在每一个执行等级中会执行哪些系统服务,其中包括各类常驻服务 ...
- js36---函数嵌套
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- onvif开发之设备发现功能的实现--转
忙了一个多月,onvif总算告一段落了.这几个星期忙着其他的项目,也没有好好整理一下onvif的东西.接下来得好好整理一下自己的项目思路和项目经验,同时将自己的一些心得写出来,希望对人有所帮助. 相信 ...
- 嵌入式 Linux应用程序如何读取(修改)芯片寄存器的值
这一问题来自项目中一个实际的需求:我需要在Linux启动之后,确认我指定的芯片寄存器是否与我在uboot的配置一致. 举个例子:寄存器地址:0x20000010负责对DDR2的时序配置,该寄存器是在u ...