zoukankan      html  css  js  c++  java
  • 关于table动态添加数据 单元格合并 数组合并

    var newArr = [
    {"BranchID":1,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":101,"IssueTypeName":"宏蜂窝连片弱覆盖","Total":242,"WithoutDemand":139,"WithDemand":103},

    {"BranchID":2,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":102,"IssueTypeName":"宏蜂窝2G高倒挂","Total":146,"WithoutDemand":67,"WithDemand":79},

    {"BranchID":3,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":103,"IssueTypeName":"宏蜂窝道路黑点","Total":334,"WithoutDemand":151,"WithDemand":183},

    {"BranchID":4,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":104,"IssueTypeName":"宏蜂窝高负荷小区","Total":41,"WithoutDemand":41,"WithDemand":0},

    {"BranchID":5,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":105,"IssueTypeName":"宏蜂窝新区规划","Total":0,"WithoutDemand":0,"WithDemand":0},

    {"BranchID":6,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":106,"IssueTypeName":"宏蜂窝投诉","Total":989,"WithoutDemand":892,"WithDemand":97},

    {"BranchID":7,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":107,"IssueTypeName":"宏蜂窝市场需求","Total":0,"WithoutDemand":0,"WithDemand":0},

    {"BranchID":8,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":108,"IssueTypeName":"宏蜂窝保障需求","Total":0,"WithoutDemand":0,"WithDemand":0}];

    var ths = [];
    var td1 = [];
    var td2 = [];

    for(var i=0;i<newArr.length;i++){
    ths.push(newArr[i].BranchID);
    td1.push(newArr[i].WithDemand);
    td2.push(newArr[i].Total);
    }

    c = ths.concat(td1,td2);//数组合并

    console.log(c)
    var k = 0;
    var str = '';
    str += "<table border='1' bordercolor='#000'>";
    str += '<th colspan="4">1</th>';str +='<th colspan="4">2</th>';//单元格合并 横向合并colspan=""纵向合并 rowspan=""及 表头内容  
    for(var i = 0; i < 13; i++) { //一共13行
    str += '<tr>';
    for(var j = 0; j < 8; j++) {//一共8列
    var tds = '<td>' + c[k] + '</td>';

    k++;
    str += tds;
    }
    str += '</tr>';
    }
    str += '</table>';
    $('#divId').html(str);

    下面是我的公众号,大家可以关注一下,可以一起学习,一起进步:

  • 相关阅读:
    设计模式之结构型(6)-享元模式(Flyweight)
    设计模式之结构型(7)-代理模式(Proxy)
    设计模式之行为型(1)-职责链模式(Chain)
    设计模式之行为型(2)-命令模式(Command)
    设计模式之行为型(3)-解释器模式(Interpreter)
    设计模式之行为型(4)-迭代器模式(Iterator)
    设计模式之行为型(5)-中介者模式(Mediator)
    设计模式之行为型(6)-备忘录模式(Memento)
    设计模式之行为型(7)-观察者模式(Observer)
    设计模式之行为型(8)-状态模式(State)
  • 原文地址:https://www.cnblogs.com/lxl0419/p/6561571.html
Copyright © 2011-2022 走看看