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. 北邮新生排位赛2解题报告a-c

    A. 丁神去谷歌 2014新生暑假个人排位赛02 时间限制 1000 ms 内存限制 65536 KB 题目描述 丁神要去Google上班了,去之前丁神想再做一道水题,但时间不多了,所以他希望题目做起 ...

  2. HotSpot虚拟机对象探秘

    参考:http://www.infoq.com/cn/articles/jvm-hotspot

  3. Saiku的基本使用介绍（三）

    Saiku的基本使用介绍(这里都是使用Admin用户登录系统) 1.启动安装好的Saiku  ( ./start-saiku.sh ) ,浏览器使用访问系统 http://localhost:8080 ...

  4. vue-14-过滤

    过滤器可以用在两个地方:mustache 插值和 v-bind 表达式 <!-- in mustaches --> {{ message | capitalize }} <!-- i ...

  5. SharePoint Framework 在Visual Studio Code中调试你的托管解决方案

    博客地址:http://blog.csdn.net/FoxDave 上一篇介绍了如何在本地调试你的SharePoint Framework解决方案,本篇介绍如何调试你的SharePoint Onl ...

  6. MVC4.0实现批量删除

    HTML: @using(Html.BeginForm("Delete","Home")){    <div>    <input type= ...

  7. MySql笔记之数据备份与还原

    MySQL数据备份.还原与迁移 一.数据备份------mysqldump 1.语法: mysqldump -u user(用户名)-h host(登录用户的主机名称)-p password(登录密码 ...

  8. chromium ③

    chromium源码学习笔记(1) -- 学习计划       对于c++开发者来说,chromium几乎是目前最值得学习的优秀开源代码.先看看chromium包含了多少令人激动的特性:     1, ...

  9. Python 爬虫的工具列表大全

    Python 爬虫的工具列表大全 这个列表包含与网页抓取和数据处理的Python库.网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pyc ...

  10. mail工具的安装、配置及问题处理

    使用mail发邮件时,应先将相关邮件服务启动,本文主要介绍sendmail邮件工具的配置方法和问题处理. 1.安装 ubuntu中sendmail函数可以很方便的发送邮件,ubuntu sendmai ...