js动态添加表格并合并行

1，首先我们得准备两个数组和一个变量

/*
 TableArr ===>表格要渲染的数据
printArr ===>储存表格中rowspan的变量的数组
 pos ===>表格中rowspan的值

*/
var TableArr = [
{name:'张三',Children:'张1'}
{name:'张三',Children:'张2'}
{name:'张三',Children:'张3'}
{name:'李四',Children:'李1'}
]
var printArr = []
var pos = 0

2,对TableArr 进行排序，为了让属性一样的对象放到一块

// 数组排序方法(obj1.name数组对象中要排序的字段)
    function compare(obj1, obj2) {
        var val1 = obj1.name;
        var val2 = obj2.name;
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }

3，然后开始设置pos值并全部添加到printArr数组中(这个方法中的list[i].name也就是看你合并的那个字段)

    function printArrPush(list){
        list.sort(compare);
        printArr = []
        var k = 0
        var _this = this
        for (var i = 0; i < list.length; i++) {
            if (i === 0) {
                list[i].key = k
                printArr.push(1)
                pos = 0
            }else {
                if (list[i].name=== list[i - 1].name) {
                    list[i].key = k
                    printArr[pos] += 1
                    printArr.push(0)
                } else {
                    k +=1
                    list[i].key = k
                    // 不相等push 1
                    printArr.push(1)
                    pos = i
                }
            }

        }
    }
printArrPush(TableArr )

4，最后就是添加表格就行了

function showTable(){
        $('.layui-table tbody').empty()
        $.each(TableArr,function (i,v) {
            var rowspan = printArr[i]==0?'':'<td rowspan="'+printArr[i]+'">'+v.name+'</td>'
            var newTable='<tr>\n'+
                rowspan+
                '<td>\n'+v.Children+'</td>\n'+
                '<td>\n'+
                '<button class="btn btn-default layui-icon layui-icon-delete" type="button">删除</button>\n'+
                '</td>\n'+
                '</tr>'

            $('.layui-table tbody').append(newTable)
        })
    }
showTable()

OK！完事