正常思维是:
我们先循环行然后再循环列,然后依次将数据填到td里面就可以了。如下:
var TableObj = document.getElementById('table');
var table = [{value:123,code:0},{value:223,code:0}];
var tableStr = '';
for(var i =0;i<table.length;i++){
tableStr += '<tr>';
tableStr += '<td>'+table[i]++'</td>';
tableStr += '</tr>';
}
TableObj.innerHtml = tableStr;
这样我们就可以得到一个两行一列的表格了。
但是,假如我们得到的数据在得到的那一刻就已经规定了这一行数据在第几行第几列呢?
//row == 规定这条数据放在第几行,
//col == 规定这条数据放在第几列,
//rowspan == 规定数据占几行
//colspan == 规定数据占几列
//rowNumber == 表的总行数
//colNumber == 表的总列数
var json = [
{rowNumber:2,colNumber:4,row:1,col:1,rowspan:2,colspan:1,value:"序号"},
{rowNumber:2,colNumber:4,row:2,col:3,rowspan:1,colspan:1,value:"单元格4"},
{rowNumber:2,colNumber:4,row:1,col:2,rowspan:1,colspan:2,value:"单元格2"},
{rowNumber:2,colNumber:4,row:1,col:3,rowspan:1,colspan:1,value:"单元格5"},
{rowNumber:2,colNumber:4,row:2,col:2,rowspan:1,colspan:1,value:"单元格3"},
{rowNumber:2,colNumber:4,row:2,col:4,rowspan:1,colspan:1,value:"单元格6"},
]
如果数据结构是这样子的,那就算咱们将其循环出来,也不能按着顺序去拿数据。理想效果应该是这样:
序号 | 单元格2 | 单元格5 | |
单元格3 | 单元格4 | 单元格6 |
解决方案:
//思路:先把行列循环出来,再对当前所在的单元格去匹配所有数据,符合当前位置的将值直接填到当前单元格中
//因为表的总行数和列数已经得到,事情办起来就简单多了,我们随便去取
for(var row=1;row<json[0].rowNumber;row++){
tableStr += "<tr>";
for(var col=1;col<json[0].colNumber;col++){
for(var value = 0;value<json.length;value++){
if(json[value].row == row && json[value].col == col){
TableStr += "<td>"+json[value].value+"</td>";
}
}
}
tableStr += "</tr>";
}