<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-
collapse: collapse;
border-spacing: 0
;
width:800px;
margin:auto;
}
td{
border:1px solid #ddd;
padding:3px 10px;
text-
align: center;
}
</style>
</head>
<body>
<div id="table">
</div>
<script>
var data=
[
{name:'AA',value:2.3,id:'101',pid:'000'
},
{name:'BB',value:2.3,id:'102',pid:'000'
},
{name:'CC',value:2.3,id:'101101',pid:'101'
},
{name:'DD',value:2.3,id:'101102',pid:'101'
},
{name:'EE',value:2.3,id:'101101101',pid:'101101'
},
{name:'FF',value:2.3,id:'101101102',pid:'101101'
},
{name:'GG',value:2.3,id:'101102101',pid:'101102'
},
{name:'HH',value:2.3,id:'101102102',pid:'101102'
},
{name:'II',value:2.3,id:'102101',pid:'102'
},
{name:'JJ',value:2.3,id:'102101101',pid:'102101'
},
{name:'KK',value:2.3,id:'102101102',pid:'102101'
},
{name:'MM',value:2.3,id:'102101103',pid:'102101'
},
{name:'NN',value:2.3,id:'102101104',pid:'102101'
},
{name:'LL',value:2.3,id:'102101105',pid:'102101'
},
];
creatTable(data);
//分组
function group(data){
var obj=
{};
for(
var i=0;i<data.length;i++
){
var _l=
data[i].id.length;
if(obj[_l]===
undefined){
obj[_l]=
[data[i]];
}else{
obj[_l].push(data[i])
}
}
return obj;
}
//获得排序信息
function getList(obj){
return Object.keys(obj).sort(
function(a,b){
return Number(b)-
Number(a)});
}
//计算
function creatTable(data){
var d=
group(data);
var arr=
getList(d);
var obj=
{};
for(
var i=0,len=arr.length;i<len;i++
){
for(
var k=0;k<d[arr[i]].length;k++
){
var o=
d[arr[i]][k];
if(obj[o.pid]===
undefined){
obj[o.pid]={l:0,s:0,str:''
};
}
if(i==0
){
obj[o.pid].l++
;
obj[o.pid].s+=
o.value;
obj[o.pid].str+=(obj[o.pid].str==''?'':'<tr>')+"<td>"+o.name+"</td><td>"+o.value+"</td></tr>"
;
}else{
var str=''
;
if(!((i+1)<
len)){
str="<tr>"
;
}else{
str=obj[o.pid].str==''?'':'<tr>'
;
obj[o.pid].l+=
obj[o.id].l;
}
str+="<td rowspan='"+obj[o.id].l+"'>"+o.name+"</td><td rowspan='"+obj[o.id].l+"'>"+o.value+"</td>"
;
obj[o.pid].s+=
obj[o.id].s;
obj[o.pid].str+=(str+
obj[o.id].str);
}
}
}
document.getElementById('table').innerHTML="<table>"+obj['000'].str+"</table>"
;
//i<d[arr[arr.length-1]].length
}
</script>
</body>
</html>
截图
转载于:https://www.cnblogs.com/pengfei25/p/9571144.html
相关资源：JAVA上百实例源码以及开源项目
