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. bzoj4278

    题解: 把第一个串放好,加一个oo 然后把第二个串倒序放进来 然后就是http://www.cnblogs.com/xuanyiming/p/8510231.html这一题了 代码: #include ...

  2. 浅谈caffe中train_val.prototxt和deploy.prototxt文件的区别

    本文以CaffeNet为例: 1. train_val.prototxt  首先,train_val.prototxt文件是网络配置文件.该文件是在训练的时候用的. 2.deploy.prototxt ...

  3. Domination（概率DP)

    Domination 题目链接:https://odzkskevi.qnssl.com/9713ae1d3ff2cc043442f25e9a86814c?v=1531624384 Edward is ...

  4. CodeForces - 631C （截取法）

    C. Report time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  5. oracle语句优化

    摘录来自https://blog.csdn.net/sap_jack/article/details/3766703 1.选用适合的Oracle优化器 Oracle的优化器共有3种: a.RULE(基 ...

  6. [学习] SpringMVC/JavaEE/JavaSE

    浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别 几个Map集合的区别 Java多线程

  7. DIV垂直居中对齐

    效果图: CSS: #container{ display:table-cell; width:300px; height:300px; vertical-align:middle; border:1 ...

  8. HDU 3130 17多校7 Kolakoski（思维简单）

    Problem Description This is Kolakosiki sequence: 1,2,2,1,1,2,1,2,2,1,2,2,1,1,2,1,1,2,2,1……. This seq ...

  9. 【Python】利用正则解析xml练习题

    { "date": "18-03-29 06:04:47", "data": { "deviceType": 1, &q ...

  10. Spring Boot 揭秘与实战（九） 应用监控篇 - 自定义监控端点

    文章目录 1. 继承 AbstractEndpoint 抽象类 2. 创建端点配置类 3. 运行 4. 源代码 Spring Boot 提供的端点不能满足我们的业务需求时,我们可以自定义一个端点. 本 ...