<!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. iOS中的成员变量,实例变量,属性变量

    在ios第一版中: 我们为输出口同时声明了属性和底层实例变量,那时,属性是oc语言的一个新的机制,并且要求你必须声明与之对应的实例变量,例如: 注意:(这个是以前的用法) @interface MyV ...

  2. 转 java中5种创建对象的方法

    作为Java开发者,我们每天创建很多对象,但我们通常使用依赖管理系统,比如spring去创建对象.然而这里有很多创建对象的方法,我们会在这篇文章中学到. Java中有5种创建对象的方式,下面给出它们的 ...

  3. 【poj 1724】 ROADS 最短路（dijkstra+优先队列）

    ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12436 Accepted: 4591 Description N ...

  4. CentOS 7下安装Hadoop2.2

    这里就介绍CentOS的安装了,直接进入Hadoop2.2伪分布模式安装. 1.安装包下载 1.1.下载JDK1.7 眼下JDK的版本号是jdk1.8.0_25.这里下载的是jdk1.7.0_67. ...

  5. unity3D游戏开发实战原创视频讲座系列11之相扑游戏开发并公布到Win\WP8

     解说文件夹 第一讲 游戏的演示和资源介绍 第二讲 场景的建设 第三讲 玩家的移动 第四讲 对手的AI(让对手动起来) 第五讲 游戏的管理(上) 第六讲 游戏的管理(下) 第七讲 公布到Win8系 ...

  6. Office 修改语言

  7. Android Studio报错：DefaultAndroidProject : Unsupported major.minor version 52.0

    今天使用Android Studio 2.0打开我之前的项目时,编译报了如下错误: Error:Cause: com/android/build/gradle/internal/model/Defau ...

  8. PKUACM2018 A Wife——DP

    题目:http://poj.openjudge.cn/practice/C18A/ 据说正解是差分约束,转化的过程还要用到标准型.对偶型什么的知识,暂时还不太懂... 但也有贪心DP做法,有个结论:一 ...

  9. 杂项-QXM：CFA（特许金融分析师）

    ylbtech-杂项-QXM:CFA(特许金融分析师) 1.返回顶部 1. CFA是“特许金融分析师”(Chartered Financial Analyst)的简称,它是证券投资与管理界的一种职业资 ...

  10. js和php中几种生成验证码的方式

    之前做过取随机数和生成验证码的练习,都是通过取随机数作为数组下标,然后从数组中取值的方式(js): /*验证码*/ function sj_yzm(){ //存一个包括数字和字母的数组 var zon ...