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. 在docker hub，用github的dockerfile自动生成docker镜像

    简介: 我已经深深的爱上了docker技术. 在日常使用中,经常看到docker hub 中有很多autobuild的镜像.基本使用是在github中上传dockerfile,过一会儿,docker ...

  2. hMailServer SSL 配置

    1.先安装 openssl , 调用如下命令,生成证书: openssl genrsa -des3 - openssl req -new -key alics.key -out alics.req o ...

  3. eclipse项目环境搭建（做了好多遍，老是忘记，以此文帮助记忆）

    今天把eclipse的环境搭建好(不能用myeclipse好忧伤). 要求: 1.在svn上管理项目,要下载svn插件. 2.是web所以要用到tomcat插件. 3.将项目运行起来. 流程: ecl ...

  4. sys.argv]的用法

    Python中 sys.argv[]的用法简明解释 因为是看书自学的python,开始后不久就遇到了这个引入的模块函数,且一直在IDLE上编辑了后运行,试图从结果发现它的用途,然而结果一直都是没结果, ...

  5. matlabR2017安装

    安装教程参考: https://blog.csdn.net/m0_37638031/article/details/78982498

  6. jmeter中添加压力机

    在压测的时候,可能并发比较大,一台机子已经启动不了那么多并发了,这个时候就是有多台机子一起来并发,就要添加压力机 如何添加压力机呢: 1.其他电脑上也安装了jmeter,和其他电脑都能ping通当前电 ...

  7. 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.

    1)jquery  validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...

  8. python-django的生命周期

    wsgi,请求封装后交给web框架(flask,django) 中间件,对请求进行校验或在请求对象中添加其他相关数据,列如(scrf[跨域],request,session) 路由匹配,根据浏览器发送 ...

  9. 审计系统---堡垒机项目之strace追踪ssh

    strace 追踪ssh的进程ID,记录操作的命令[实际上是内核里面记录的东西],进行操作日志的Py解析达到效果. 修改ssh源码添加访问标志位 源码下载:[本文示例:openssh-7.4p1.ta ...

  10. [工作日志] 2018-12-06 重点: 解决安全测试bug

    安全测试bug 业务端提出, 在修改是否给联系人发送短信接口,如果操作人和被操作的联系人不在同一个企业的情况下, 也是可以修改的. 解决办法: 加校验.