• 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的更多相关文章

  1. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  2. [转]table中设置tr行间距

    原文地址:https://blog.csdn.net/itmyhome1990/article/details/50475616 CSS border-collapse 属性设置表格的边框是否被合并为 ...

  3. table 中的tr 行点击 变换颜色背景

    <style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...

  4. table中设置tr行间距

    CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值 描述 separate 默认值.边框会被分开.不会忽略 border-spacing 和 empty-cell ...

  5. table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  6. 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

    http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...

  7. js的传值，table中tr的遍历，js中动态创建数组

    1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...

  8. vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th

    本次示例效果如下: TextBox1中输入如下字符串: 12<table><tbody><tr><td>1<br/>11</td> ...

  9. table中tr使用toggle不好，选择换一张方式

    好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...

随机推荐

  1. android中9-patch图片的使用

    看了非常多文章的介绍,9.png图片有两种区域:可扩展区和内容显示区. 弄了半天才明确什么叫做可扩展区,什么叫做内容显示区. 分享一下自己的理解. 下图是某博客的截图: 图片来自:http://blo ...

  2. 关于TabLayout+ViewPager组合实现多页面滑动

    转载请注明出处:http://blog.csdn.net/ht_android/article/details/46647711 在android提供的design library中新增了一个控件,叫 ...

  3. 如何使用定时器settimeout、setInterval执行能传递参数的函数(转)

    来自: http://www.cnblogs.com/wkylin/archive/2012/09/07/2674911.html var userName="jack";//根据 ...

  4. Oracle 11g win7 64位【桌面类 && 服务器类】安装过程

    Oracle 11g  win7  64位[桌面类 && 服务器类]安装过程  一.首先,根据自己的操作系统位数(32位或64位),到官网下载相应的安装程序,如下图所示.       ...

  5. JQuery DataTables 列自己定义数据类型排序

    使用JQ DataTables 的时候.希望某列数据能够进行自己定义排序.操作例如以下:(以中文排序和百分比排序为例) 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt ...

  6. 写了个去重复文件的 PHP 脚本，

    写了个去重复文件的 PHP 脚本点击打开链接 把各个零散网盘.邮箱和服务器上的文件,三台电脑上的文件收集在新硬盘里,然后清空了网络和电脑上的文件.才发现这个文件不能这里放点,那里存点,到时候不知道在哪 ...

  7. Vue的全选功能实现思路

    全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...

  8. 【MongoDB】在windows平台下mongodb的分片集群（六）

    在本篇博客中我们主要讨论下博客的管理.因为已经在前面五篇中写了具体的实例,因此这里就不再举例说明. 一.监控 分片集群是整个体系中比較复杂的一块,因此更应该须要监控. 主要命令: serverstat ...

  9. 对象的序列化与反序列化---IO学习笔记（四）

    对象的序列化,反序列化 对象的序列化: 就是将Object转换成byte序列 对象的反序列化: 将byte序列转换成Object 序列化流.反序列化流 序列化流(ObjectOutputStream) ...

  10. Zorka和zico实现不同主机之间的交互

    之前参考下面的两篇博文进行了zorka以及其collector端zico的配置. http://quyuxjtu.sinaapp.com/?p=532 http://quyuxjtu.sinaapp. ...