zoukankan      html  css  js  c++  java
  • js 根据数组分组动态生成table(相同项合并)

    <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
    <html>
    <head>
    <title> new document </title>
    <script>
    //xxbh:学校编号,bjbh:班级编号,xx:姓名
    var arrjson=[
    {'xxbh':'1001','bjbh':'0801','xx':'李四'},{'xxbh':'1001','bjbh':'0802','xx':'张三'},
    {'xxbh':'1003','bjbh':'0803','xx':'王五'},{'xxbh':'1003','bjbh':'0804','xx':'晶晶'},
    {'xxbh':'1005','bjbh':'0701','xx':'亮亮'},{'xxbh':'1002','bjbh':'0701','xx':'明敏'},
    {'xxbh':'1005','bjbh':'0701','xx':'张灿'},{'xxbh':'1002','bjbh':'0801','xx':'小白'},
    {'xxbh':'1005','bjbh':'0802','xx':'小胖'},{'xxbh':'1002','bjbh':'0901','xx':'小丽'},
    {'xxbh':'1003','bjbh':'0901','xx':'阿宝'},{'xxbh':'1004','bjbh':'0901','xx':'王泰'},
    {'xxbh':'1001','bjbh':'0901','xx':'阿毛'},{'xxbh':'1006','bjbh':'0901','xx':'李铭'},
    {'xxbh':'1005','bjbh':'0901','xx':'阿城'},{'xxbh':'1004','bjbh':'0901','xx':'张晓'},
    {'xxbh':'1006','bjbh':'0901','xx':'小小'},{'xxbh':'1004','bjbh':'0901','xx':'白昼'},
    {'xxbh':'1002','bjbh':'0901','xx':'乐乐'},{'xxbh':'1001','bjbh':'0901','xx':'黎明'}
    ];
    function creatmapbyxxbh(arrjson){
    var xxbhmap={};
    var len = arrjson.length;
    for(var i=0;i<len;i++){

    if(xxbhmap[arrjson[i].xxbh] == undefined){
    var list = [];
    list.push(arrjson[i]);
    xxbhmap[arrjson[i].xxbh] = list;
    }else{
    xxbhmap[arrjson[i].xxbh].push(arrjson[i]);
    }

    }
    var str="<table border='1'><tr><td width='200'>学校编号</td><td width='200'>班级</td><td width='200'>姓名</td></tr>";
    for(var xxbh in xxbhmap){
    var stu = xxbhmap[xxbh];
    alert(stu.length);
    str+="<tr><td rowspan='"+stu.length+"'>"+xxbh+"</td>";
    for(var i = 0;i < stu.length;i++){
    //document.write(xxbh + " "+stu[i].bjbh+" "+stu[i].xx +"<br />")
    //document.write("<table><tr><td>学校编号</td><td>班级</td><td>姓名</td></tr></table> ")
    if(i==0){
    str+="<td>"+stu[i].bjbh+"</td><td>"+stu[i].xx+"</td></tr>";
    }else{
    str+="<tr><td>"+stu[i].bjbh+"</td><td>"+stu[i].xx+"</td></tr>";
    }
    }
    str+="<tr ><td colspan='3'>"+xxbh+"共有"+stu.length+"个班级</td></tr>"
    }
    str+="</table> ";
    document.write(str)
    }
    </script>
    </head >
    <body>
    <button onclick='creatmapbyxxbh(arrjson)'>测试</button>
    </body>
    </html>

  • 相关阅读:
    笔记:端子镀金厚度
    笔记:C 编译过程
    抽象类与接口类
    面向对象的三大特性之继承
    类命名空间与对象、实例的命名空间 面向对象的组合用法
    初识类和对象
    面向过程与面向对象
    初识面向对象
    hashlib模块configparser模块logging模块
    collections模块和os模块
  • 原文地址:https://www.cnblogs.com/yangpeng-jingjing/p/6650413.html
Copyright © 2011-2022 走看看