<!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. Xcode9自带版本控制系统(Git)的使用

    情形一:新项目工程 前提是首先你得有个Github账号. 1.创建新工程,选中使用git,创建本地仓库. 2.在偏好设置添加git账号. 3.创建Github远程仓库,xcode会自动帮你在Githu ...

  2. MVC之使用Nhibernate

    NHibernate是一个基于.Net,用于关系数据库的对象持久化类库.它是著名的Hibernate的.Net版本,NHibernate用于把你的.Net对象持久化到底层的关系数据库中.你完全不用自己 ...

  3. LeetCode 451. Sort Characters By Frequency （根据字符出现频率排序）

    Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...

  4. Linux I2C设备驱动编写（一）【转】

    本文转载自:http://blog.csdn.net/airk000/article/details/21345457 在Linux驱动中I2C系统中主要包含以下几个成员: I2C adapter 即 ...

  5. basename与dirname命令解析【转】

    本文转载自:http://blog.csdn.net/choice_jj/article/details/8766335 basename命令 语法:basename string [suffix] ...

  6. WebSocket握手总结

    网址:http://blog.csdn.net/edwingu/article/details/44040961 WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器 ...

  7. 编码格式（UTF-8 与 ANSI）各种编码解码（encode、decode）

    Windows:默认为 ANSI,记事本程序另存为处,可以设置其他编码格式: Ubuntu:默认为 UTF-8 1. ANSI ANSI 编码表示英文字符时用一个字节,表示中文用两个或四个字节 -- ...

  8. 【POJ 2559】 Largest Rectangle in a Histogram

    [题目链接] http://poj.org/problem?id=2559 [算法] 单调栈 [代码] #include <algorithm> #include <bitset&g ...

  9. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

  10. [bzoj3274]Circle

    https://www.zybuluo.com/ysner/note/1243396 题面 有\(n\)个排成一圈的格子,并且已知正整数\(k\)和\(m\),你需要往每个格子中填入一个大于等于\(k ...