0901表格倒序算法

<!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;
    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