<!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. 小胖说事31------iOS 真机编译错误&quot;“XXX”的 iPod&quot; and run &quot;XXX&quot; again, or if &quot;XXX&quot; is still running

    在真机上測试时用一会就出现例如以下信息,且应用挂掉. Restore the connection to ""XXX"的 iPod" and run " ...

  2. ScrollView中嵌套ScrollView或ListView而且内部ScrollView或ListView也可滑动

    1.ScrollView中嵌套ScrollView而且内部ScrollView也可滑动 (1)ScrollView继承类 public class InnerScrollView extends Sc ...

  3. ubuntu rdesktop 全屏切换快捷键

    rdesktop 全屏之后进行切换 : ctrl + alt +enter

  4. Android简单开发之 通用Adapter ViewHolder

    我们寻常使用Adapter的方式 public class BusbaseSearchApadter extends SimpleBaseApadter { private List<Busba ...

  5. POJ2985 The k-th Largest Group treap

    POJ2985 比较简单的平衡树题目 树内不要添加容量为1的节点 否则会超时. #include<iostream> #include<cstdio> #include< ...

  6. PCB genesis Slot槽转钻孔(不用G85命令)实现方法

    PCB钻Slot槽一般都采用G85命令钻槽孔,而采用G85命令工程CAM无法准确的知道Slot槽钻多少个孔,并不能决定钻槽孔的顺序,因为采用G85命令钻孔密度与钻槽顺序由钻机本身决定的.在这里介绍一种 ...

  7. js判断出两个字符串最大子串的函数

    <!DOCTYPE html><html><head> <title></title></head><script typ ...

  8. jeecg中列表查询数据关联其他表的显示

    1.A表字段:id,name;B表字段:id,name,fid(A表外键),现查询A表和B表的所有数据并且查询条件A,B都有,在前台页面list显示 2.后台方法: @RequestMapping(p ...

  9. C#中Random

    说明:C#中的随机数是一个伪随机数,随机数字从一组有限的数字选择以相同的概率,所选的数字不是完全随机的,因为使用数学算法来选择它们.在大多数Windows系统中,Random的15毫秒内创建的对象很可 ...

  10. 记一次MySQL索引优化

    两张表是主(CHECK_DRAWINGS)从(CHECK_DRAWINGS_IMG)关系. CHECK_DRAWINGS,主表数据 3591条. SELECT COUNT(*) FROM CHECK_ ...