zoukankan      html  css  js  c++  java
  • 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>

     截图

  • 相关阅读:
    C++中int与string的相互转换【转】
    C# 获取文件名及扩展名【转】
    k8s查看容器日志---查看运行中指定pod以及指定pod中容器的日志
    shell字符串截取
    Kubernetes集群之清除集群
    Expect Command And How To Automate Shell Scripts Like Magic
    CentOS 7搭建本地yum源和局域网yum源
    使用MobaXterm配置ssh隧道(port forwarding)
    重置jenkins用户名密码
    Kubernetes之Taints与Tolerations 污点和容忍
  • 原文地址:https://www.cnblogs.com/pengfei25/p/9571144.html
Copyright © 2011-2022 走看看