分享

js动态生成table合并相同项

 实力决定地位 2013-01-21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> 
<html> 
 <head> 
  <title> New Document </title> 
  <script type="text/javascript">
      //xxbh:学校编号,bjbh:班级编号,xx:姓名 
      var arrJson = [
          { 'xxbh': '1001', 'bjbh': '0801', 'xx': '李四','je':20 }, { 'xxbh': '1001', 'bjbh': '0802', 'xx': '张三','je':200 },
          { 'xxbh': '1003', 'bjbh': '0803', 'xx': '王五', 'je': 20 }, { 'xxbh': '1003', 'bjbh': '0804', 'xx': '晶晶','je':10 },
          { 'xxbh': '1005', 'bjbh': '0701', 'xx': '亮亮', 'je': 20 }, { 'xxbh': '1002', 'bjbh': '0701', 'xx': '明敏', 'je': 25 },
          { 'xxbh': '1005', 'bjbh': '0701', 'xx': '张灿', 'je': 90 }, { 'xxbh': '1002', 'bjbh': '0801', 'xx': '小白', 'je': 40 },
          { 'xxbh': '1005', 'bjbh': '0802', 'xx': '小胖', 'je': 30 }, { 'xxbh': '1002', 'bjbh': '0901', 'xx': '小丽', 'je': 10 },
          { 'xxbh': '1003', 'bjbh': '0901', 'xx': '阿宝', 'je': 10 }, { 'xxbh': '1004', 'bjbh': '0901', 'xx': '王泰', 'je': 90 },
          { 'xxbh': '1001', 'bjbh': '0901', 'xx': '阿毛', 'je': 10 }, { 'xxbh': '1006', 'bjbh': '0901', 'xx': '李铭', 'je': 120 },
          { 'xxbh': '1005', 'bjbh': '0901', 'xx': '阿城', 'je': 10 }, { 'xxbh': '1004', 'bjbh': '0901', 'xx': '张晓', 'je': 280 },
          { 'xxbh': '1006', 'bjbh': '0901', 'xx': '小小', 'je': 90 }, { 'xxbh': '1004', 'bjbh': '0901', 'xx': '白昼', 'je': 10 },
          { 'xxbh': '1002', 'bjbh': '0901', 'xx': '乐乐', 'je': 10 }, { 'xxbh': '1001', 'bjbh': '0901', 'xx': '黎明', 'je': 20 }
      ];
      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><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++) {
                if (i == 0) {
                      str += "<td>" + stu[i].bjbh + "</td><td>" + stu[i].xx + "</td><td>"+stu[i].je+"</td></tr>";
                  } else {
                    str += "<tr><td>" + stu[i].bjbh + "</td><td>" + stu[i].xx + "</td><td>" + stu[i].je + "</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> 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约