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数据渲染两列多行的表格
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 推荐指数:Github 地址:https://github.com/PanJiaChen/vue-element-...
- 今天来写一个关于Bootstrap Table使用教程(请求json数据渲染表格)json数据来源于后端小伙伴的接...