js动态加载数据合并单元格，

代码如下所示，可复制直接运行：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>td{padding:2px 30px}</style>

</head>

<body>

<script type="text/javascript">

    var num =0;

    window.onload=function(){

    var myData=[

                    ["姓名","年龄","科目"],

                    ['张三','11',"语文"],

                    ['张三','11',"数学"],

                    ['张三','11',"数学"],

                    ['李四','11',"数学"],

                    ['李四','11',"数学"],

                    ['李四','11',"数学"],

                    ['www','11',"数学"],

                    ['www','11',"数学"],

                    ['www','11',"数学"],

                    ['www','11',"数学"]

               ]

    var str="<table border='1' cellspacing='0' cellpadding='0'><tbody>";

    var c=0;

    for(var i=0; i<myData.length; i++){

        if(i > 0) {

            if (myData[i][0] == myData[i - 1][0]) {

                str+="<tr><td>"+myData[i][1]+"</td><td>"+myData[i][2]+"</td></tr>";

            }else {

                 str+="</tbody>";

                  str+="<tbody>";

                  str+="<tr><td rowspan='1000'>"+myData[i][0]+"</td><td>"+myData[i][1]+"</td><td>"+myData[i][2]+"</td></tr>";

            }

        }else{

            str+="<tr><td>"+myData[i][0]+"</td><td>"+myData[i][1]+"</td><td>"+myData[i][2]+"</td></tr>";

        }

    }

    str+='</tbody></table>';

    //console.log(str);

    document.getElementById("table").innerHTML=str;

}

</script>

<div id="table" ></div>

</body>

</html>

js动态加载数据并合并单元格的更多相关文章

  1. js动态加载数据到文本框指定的位置

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  3. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  4. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

  5. 微信小程序（五） 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  6. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  7. 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取

    1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...

  8. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  9. 爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取

    selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...

随机推荐

  1. flask下载zip文件报错TypeError

    报错内容:TypeError: make_conditional() got an unexpected keyword argument 'accept_ranges' 报错行自己代码如下: dir ...

  2. css3 前端开发

    一.前缀: -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome. 二.CSS3圆 ...

  3. POST提交表单时EnType设置问题

    POST提交表单时EnType设置问题 首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选: 1.application/x-www-form-urlencoded 2.mult ...

  4. bzoj3277

    题解: 后缀自动机 然后抄了一发题解 可以看看这个博客:http://blog.csdn.net/clover_hxy/article/details/53861268 代码: #include< ...

  5. redis：集群配置

    一.redis集群相关 1.概念:redis集群是通过数据分区提供可用性的,这样即使一部分节点失效也可以继续处理请求. 2.原理:集群使用数据分片实现,一个redis集群包括16384个哈希槽,数据库 ...

  6. 多线程处理慢sql查询小笔记~

    多线程处理慢sql查询以及List(Array)的拆分 系统数据量不大,但是访问速度特别慢,使用多线程优化一下!!! 优化结果:访问时间缩短了十几秒  25s --> 8s 一.List的拆分: ...

  7. 3.2 Bochs

    Bochs 工具 bochs: bochs ubuntu安装配置Bochs 安装bochs sudo apt-get install bochs bochs-x 创建工程目录 创建工程目录并进入 新建 ...

  8. lxml简单用法 解析网页

    import requests s=requests.Session() re=s.get(lgurl,headers=headers)  #此处s可以直接换成requests the_page=re ...

  9. Remove duplicates from array II

    //Given a sorted array, remove the duplicates in place such that each element appear only // once an ...

  10. Problem B: 平面上的点——Point类 (II)

    Description 在数学上,平面直角坐标系上的点用X轴和Y轴上的两个坐标值唯一确定.现在我们封装一个“Point类”来实现平面上的点的操作. 根据“append.cc”,完成Point类的构造方 ...