效果图：
html:
<body>
<div class="main">
<table class="bt">
<tr>
<th style="width:86px;">序号</th>
<th style="width:318px;">项目编码</th>
<th style="width:27%;">项目名称</th>
<th style="width:27%;">项目特征</th>
<th style="width:128px;">工程量</th>
<th style="width:128px;">计量单位</th>
<th style="width:115px;">详情</th>
</tr>
</table>
<!-- 表格数据-->
<div class="content">
<div class="qt">
<div class="title">
<span class="icon"></span>
<span class="tit"></span>
</div>
<table class="shu checkTab" id="">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
css:
body,.main{
margin: 0;
padding:0;
width:100%;
height:100%
}
.tou{
margin: 0;
width:100%;
height:40px;
}
.bt{
border: 1px solid rgb(204, 204, 204);
width: 100%;
height: 32px;
border-collapse: collapse;
line-height: 32px;
background-color: #d6dde6;
color: #272727;
font-size: 16px;
cursor: default;
}
.bt th{
border: 1px solid #fff;
text-align: center;
line-height: 32px;
height: 32px;
}
.content{
top: 34px;
width: 100%;
font-size: 14px;
}
.title{
height: 34px;
line-height: 34px;
border-bottom: 1px solid #D6DDE6;
}
.icon{
background-image: url(../img/btn_hide_2.png);
width: 14px;
height: 14px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.checkIcon{
background-image: url(../img/btn_hide_1.png);
}
.shu{
width: 100%;
font-size: 14px;
color:#4f4f4f;
cursor: default;
border-collapse: collapse;
}
.shu tr td{
height:34px;
text-align: center;
border-bottom: 1px solid #D6DDE6;
font-size: 14px;
color:#4f4f4f;
border-right: 1px solid #D6DDE6;
margin-left:1px;
}
.line:hover{
text-decoration:underline
}
/*表格中奇偶行的背景色*/
.content .aaa:nth-child(even){
background-color: #F7F9F8;
}
.content .aaa:nth-child(odd){
background: #FFFFFF;
}
js + json:
$(function(){
var json = [{
"QuantityType": "砌筑工程",
"children": [{
"QuantityCode": "010402001",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "加气砼砌块",
"QuantityName": "砌块墙",
"ProjectQuantity": "1849.47",
"Units": "m3"
}, {
"QuantityCode": "010403006",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "标准红砖",
"QuantityName": "石栏杆",
"ProjectQuantity": "15.96",
"Units": "m"
}]
}, {
"QuantityType": "混凝土工程",
"children": [{
"QuantityCode": "010501001",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "混凝土C25",
"QuantityName": "垫层",
"ProjectQuantity": "190.06",
"Units": "m3"
}, {
"QuantityCode": "010502001",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "混凝土C25",
"QuantityName": "矩形柱",
"ProjectQuantity": "4.44",
"Units": "m3"
}, {
"QuantityCode": "010502003",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "混凝土C25",
"QuantityName": "异形柱",
"ProjectQuantity": "73.33",
"Units": "m3"
}, {
"QuantityCode": "010503002",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "混凝土C25",
"QuantityName": "矩形梁",
"ProjectQuantity": "56.9",
"Units": "m3"
}, {
"QuantityCode": "010505002",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "混凝土C25",
"QuantityName": "无梁板",
"ProjectQuantity": "1413.09",
"Units": "m3"
}, {
"QuantityCode": "010506001",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "混凝土C25",
"QuantityName": "直形楼梯",
"ProjectQuantity": "0.13",
"Units": "m3"
}]
}, {
"QuantityType": "模板工程",
"children": [{
"QuantityCode": "011702001",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "普通模板",
"QuantityName": "基础",
"ProjectQuantity": "76.47",
"Units": "m2"
}, {
"QuantityCode": "011702002",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "普通模板",
"QuantityName": "矩形柱",
"ProjectQuantity": "19.2",
"Units": "m2"
}, {
"QuantityCode": "011702004",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "普通模板",
"QuantityName": "异形柱",
"ProjectQuantity": "314.97",
"Units": "m2"
}, {
"QuantityCode": "011702006",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "普通模板",
"QuantityName": "矩形梁",
"ProjectQuantity": "324.51",
"Units": "m2"
}, {
"QuantityCode": "011702015",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "普通模板",
"QuantityName": "无梁板",
"ProjectQuantity": "1605.52",
"Units": "m2"
}, {
"QuantityCode": "011702024",
"MainVersion": "1",
"Profession": "结构",
"ProjectId": "268",
"Material": "普通模板",
"QuantityName": "楼梯",
"ProjectQuantity": "2.94",
"Units": "m2"
}]
}];
$(".content").empty();
$.each(json,function(i,ele){//循环标题QuantityType
$(".content").append(//往最外层div中添加样式
'<div class="aaa"><div class="title">'+
'<span class="icon"></span>'+
'<span class="tit">'+ele.QuantityType+'</span>'+
'</div><table class="shu checkTab"></table></div>');
if(ele.children.length>0){//判断children中是否有值
$.each(ele.children,function(j,elej){//循环children中数据
$(".content .checkTab:last").append(
"<tr><td width='86px'>"+(j+1)+
"</td><td width='318px'>"+elej.QuantityCode+
"</td><td style='width:27%;text-align:left;padding-left:5px;'>"+elej.QuantityName+
"</td><td style='width:27%;text-align:left;padding-left:5px;'>"+elej.Material+
"</td><td width='128px'>"+elej.ProjectQuantity+
"</td><td width='128px'>"+elej.Units+
"</td><td width='115px' class='line'>"+"详情"+
"</td></tr>"
);
});
};
});
$(".content").on("click",".icon",function(){//点击标题隐藏及显示表格
if($(this).hasClass("checkIcon")){//checkIcon收起的三角
$(this).removeClass("checkIcon");
$(this).parent().next().show();
}else{
$(this).addClass("checkIcon");
$(this).parent().next().hide();
}
});
});