美文网首页
json数据渲染两列多行的表格

json数据渲染两列多行的表格

作者: 拾钱运 | 来源:发表于2022-04-04 19:08 被阅读0次
var fees=[{type:1,name:’假数据‘}]
if (fees.length > 0) {
        var str = ''
        var trNum = Math.ceil(fees.length / 2)
        var tempI = 0 //临时i
        var tempB = 0 //判断当前循环了几次
        for (var j = 0; j < trNum; j++) {
            str += '<tr>'
            // console.log(j)
            for (var i = tempI; i < fees.length; i++) {
                tempB++
                if (i % 2 == 1) {
                    tempI = i + 1
                    break;
                }
                if (i + 1 < fees.length - 1) {
                    
                    str += '<td style="font-size: 17px;text-decoration: underline;font-weight: bold;">' + fees[i].type + '</td>' +
                        '<td>' + fees[i].name + '</td>' +
                        '<td style="font-size: 17px;text-decoration: underline;font-weight: bold;">' + fees[i + 1].type + '</td>' +
                        '<td>' +fees[i + 1].name + '</td>'
                }
//如果是奇数长度话最后一行就会多出一列
                if (tempB == fees.length) {
                    
                    str += '<td style="font-size: 17px;text-decoration: underline;font-weight: bold;">' + fees[i].type + '</td>' +
                        '<td>'+fees[i].name+'</td>' +
                        '<td style="font-size: 17px;text-decoration: underline;font-weight: bold;">/</td>' +
                        '<td>/</td>'
                }
            }
            str += '</tr>'

        }
        $('.table-bordered').append(str)

    }

相关文章

网友评论

      本文标题:json数据渲染两列多行的表格

      本文链接:https://www.haomeiwen.com/subject/mgocsrtx.html