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);

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

  • 相关阅读:
    2021软件工程-第一周作业01准备工作
    String.matches()的用法
    Idea使用JSP出现404问题---已解决
    如何解决Tomcat启动闪退现象(环境配置没问题)
    解决启动java的web项目时端口占用问题
    IntelliJ IDEA 连接数据库 详细过程-包含使用jdbc连接数据库
    ApplicationContextAware接口认识
    RestTemplate 服务间接口调用
    maven相关
    FastJson:json字符串与Java对象转换
  • 原文地址:https://www.cnblogs.com/lxl0419/p/6561571.html
Copyright © 2011-2022 走看看