关于table动态添加数据 单元格合并 数组合并

Posted 2020-09-05 夏目友人喵

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