js拼接html构成表格,js通过拼接字符串实现一对多行关系表格

什么是一对多行关系的表格呢？超人鸭最近在写一个老项目，是用jsp开发，所以里面的前端代码都是jquery，写到表格，最常用的方式还是拼接字符串去实现，前面说的表格大概是这个样子，我通过demo来演示:

image.png

说白了就是表格的合并行，表格的 td 标签有个 rowspan属性，用来合并行，如果这种结构用html写死是这样的:

第一层	第二层1	数据1
	第二层2	数据1

总结下规律就是后面有多少行就要写多少个 tr，那个占多行的单元格也就是 td 只写一次，并加上rowspan属性，那如果是用js拼接字符串该如何实现呢?先看看后端给我的数据格式:

var list = [

{ // 这个括号代表第一级数据

name: '第一层',

count: 2, // 表示占了多少行

list: [ // 这个代表第二级数据

{

name: '第二层1',

data: '数据1'

},

{

name: '第二层2',

data: '数据1'

}

]

}

]

这是超人鸭真实工作的情景，后端给我的格式就是这样的。

按照上面说的规律，对数据进行处理，并拼接字符串:

var str = ''

for (var i = 0; i < list.length; i++) {

str += '

'

str += '

' // 处理第一个td，也就是占多行的单元格

str += list[i].name + '

'

var innerList = list[i].list // 获取第二层数据

for(var j = 0; j < innerList.length; j++) {

if(j > 0) {

str += '

'

}

str += '

' + innerList[j].name + ''

str += '

' + innerList[j].data + ''

str += '

'

}

}

$('tbody').append(str) // 添加到dom节点上

emmm...可能代码有点抽象，我再画了张图表示一下:

超人鸭带画家.png

看到我画的两个tr，就是两行，第一行需要从第一个单元格开始，第二行及之后就不需要包块第一个占多行的单元格，所以再看我上面的代码，如果从 j = 1 开始就需要再写tr。

这就是一对多行关系的表格，逻辑思路就是这样子，现在是两层，为一对多，再多一层也就是一对多再对多的关系，也是一样的逻辑，只是复杂一下，下面超人鸭再演示三层的表格，先看demo:

image.png

然后数据格式:

var list = [

{

name: '第一层',

count: 5,

list: [

{

name: '第二层1',

count: 3,

list: [

{

name: '第三层1'

},

{

name: '第三层2'

},

{

name: '第三层3'

}

]

},

{

name: '第二层2',

count: 2,

list: [

{

name: '第三层4'

},

{

name: '第四层5'

}

]

}

]

}

]

这次我先画图在放代码:

超人鸭带画家.png

和上面的逻辑一样，每一层的第一次遍历都要带上第一个占多行的单元格，之后的遍历就不用带上那个占多行的单元格，而且要再写tr标签,再看代码:

for(var i = 0; i < list.length; i++) {

var innerList = list[i].list // 获取第二层的数据

str += '

'

str += '

' // 第一层那个占多行的单元格

str += list[i].name + '

'

for(var j = 0; j < innerList.length; j++) {

if(j > 0) {

str += '

'

}

str += '

' + innerList[j].name + '' // 第二层数据占多行的单元格

var lastList = innerList[j].list // 获取第三层数据

for(var k = 0; k < lastList.length; k++) {

if(k > 0) {

str += '

'

}

str += '

' + lastList[k].name + ''

str += '

'

}

}

}

$('#body').append(str)

这就是实现三层数据表格的方式，如果你也遇到同样的需求，就可以参照我的方法去实现，上面说的还是不太明白的话可以复制我的代码去写一下demo，一下子就可以明白的，还有的是如果要实现这种需求，后端给的数据格式也要合理，不是什么格式实现起来都那么顺畅，超人鸭上面的数据格式就是跟后端沟通后他返给我的，当然如果有什么更好的实现方式，十分欢迎请教哦。