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
网友评论