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. oo作业总结报告

    oo第一次博客 以前从未真正的写过Java代码,接触Java也只是寒假的时候简单的看了看语法,不懂该如何面向对象,但没事,心里不惧,想着什么都是可以学的(直到真正开始写工程的时候,才发现自己还是太天真 ...

  2. java 实现简单链式队列

    package com.my; /** * 链式队列 * @author wanjn * */ public class LinkedQueue { private Node head; privat ...

  3. python nltk 安装及配置说明

    本教程采用pip安装方式,前期需要在本机安装setuptools 及pip 网上铺天盖地的说了很多关于nltk的说明,特别是后期nltk_data 手动下载操作,多数都不好使,这里整理 用pip安装n ...

  4. 3.2 Bochs

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

  5. Reveal 破解及使用

    Reveal是一款很好的iOS调试应用,这在你的开发中起到了相当大的帮助. 破解包可去http://xclient.info/?_=118ba0724e7a6af91ba29a22ee4131da 下 ...

  6. [Leetcode 62]机器人走路Unique Path 动态规划

    [题目] A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below) ...

  7. PMS5003ST+Arduino Nano OLED屏显示

    整合OLED显示和PMS5003报数 #include <Arduino.h> #include <pms.h> /////////////////////////////// ...

  8. nginx 更改用户组

    为什么要更改 Nginx 服务的默认用户:就像更改 ssh 的默认 22 端口一样,增加安全性,Nginx 服务的默认用户是 nobody ,我们更改为 nginx 1) 添加 nginx 用户 us ...

  9. kbmMW随机数与强密码

    kbmMW随机数生成器 为了使基于kbmMW开发的项目更安全,其又提供了随机数及强密码生成实现类,拿来即用,让人感觉真是站到巨人的肩膀上好干活! 随机数方面,kbmMW分别提供32及64位的随机数生成 ...

  10. API/SPI可扩展设计原则（转）

    API/SPI可扩展设计原则 博客分类: [设计体系]架构模式 API/SPISPISPI原则JAVA SPISPI机制  写本篇主要是用来后面写一篇可扩展性软件设计打好基础(苦于找不到一篇关于API ...