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

js 根据数组分组动态生成table（相同项合并）的更多相关文章

  1. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  2. 动态生成Table内文字换行。

    后台动态生成table,并把td内的文字进行换行. 前台: <body style="width:100%;height:540px;margin-left:0px;margin-to ...

  3. jsp页面根据json数据动态生成table

    根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...

  4. 使用dwr时动态生成table的一个小技巧

    这篇随笔是我在07年写的,因为当时用了自己建设的blog,后来停止使用了,今天看到备份数据库还在,恢复出来放到这里.留着记录用. 我在使用DWR时,试了很多次都无法在动态生成的table中的一个或多个 ...

  5. angular js根据json文件动态生成路由状态

    项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...

  6. js对数组分组处理

    一.js数组分组 1.js对数据分组类似group by 源码如下: <!DOCTYPE html> <html lang="en"> <head&g ...

  7. VUE动态生成table表格（element-ui）(新增/删除)

    (直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...

  8. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  9. 通过js根据后台数据动态生成一个页面

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExportSelField ...

随机推荐

  1. jQuery事件传播，事件流

    一. jQuery事件传播 在DOM2级事件模型中,一旦事件被触发.事件流首先从DOM树顶部(文档节点)向下传播.直到目标节点.然后再从目标节点向上传播到DOM树顶.从上到下的过程被称为捕获阶段.从下 ...

  2. 软考-系统开发与软件project

    关于软件project方面的知识,相信大家都不陌生,软考中这部分知识也是重点考察范围,关于软件project的知识点很的琐碎.我把这部分的知识点分成了五部分,各自是软件project的基础知识.开发管 ...

  3. 苹果官方Instruments工具之Automation的介绍

    instruments中国的工具測试有非常多,包含非常多方面.eg:内存泄露的測试.网络连接.和cpu内存的使用情况一系列数据的图形界面的显示. 功能的介绍能够看以下的截图图片: watermark/ ...

  4. java多线程——竞态条件与临界区 学习笔记

    允许被多个线程同时执行的代码称作线程安全的代码.线程安全的代码不包含竞态条件.当多个线程同时更新共享资源时会引发竞态条件.因此,了解 Java 线程执行时共享了什么资源很重要. 一.局部变量(函数内定 ...

  5. 大文件Copy 大数据量复制

    private void button3_Click(object sender, EventArgs e)        {                        Thread thread ...

  6. 二分查找法（binary search）

    二分查找法:一种在有序列表中查找某个值的算法,它每次都将待查找的空间分为两半,在其中一般继续查找. 使用二分查找的前提是:已经排序好的列表.否则,sum对其查找的结果不做保证. 代码实现: // 使用 ...

  7. 【POJ 2018】 Best Cow Fences

    [题目链接] http://poj.org/problem?id=2018 [算法] 二分平均值 检验时将每个数减去二分的值,求长度至少为L的子序列和的最大值,判断是否大于0 [代码] #includ ...

  8. Paratroopers(最小割模型)

    http://poj.org/problem?id=3308 题意:一个m*n的网格,有L位火星空降兵降落在网格中,地球卫士为了能同时消灭他们,在网格的行或列安装了一个枪支,每行或每列的枪支都能消灭这 ...

  9. Tornado异步模式

    先介绍下背景:由于工作需要,前段时间又写了一段爬虫去获取和更新一些数据.之前爬虫主要用Scrapy框架批量爬取一些页面数据,或者用Gevent调用目标站点的接口.偶然看到了Tornado,听说这个框架 ...

  10. Django day28 频率组件，解析器

    一:频率组件: 1.频率是什么? 节流,访问控制 2. (1)内置的访问频率控制类SimpleRateThrottle (2)写一个类,继承SimpleRateThrottle class MyThr ...