js循环表格,在开始循环行列之前数据已经指定数据在单元格的位置:(第几行,第几列),该如何循环?

正常思维是:

我们先循环行然后再循环列,然后依次将数据填到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>";
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值