table表格依据数据内容相同时进行合并行单元格



合并前与合并后实际效果比较

合并前的数据表格

合并单元格后的表格效果



原理

先循环列再循环行,对第一行和第二行进行内容比较,如果内容相同,就隐藏第二行,并将计数器sum+1。继续比较第二行与第三行,依次类推,本列循环完毕,给本列第一行添加rowspan=sum

此列完毕后进行下一列。



核心代码

$(function() {
    merage()

    function merage() {
        let table = $('.table tbody')
        let lenTr = table.children('tr').size()
        let lenTd = table.children('tr').eq(0).children('td').size()
        let sum = 1
        let rowIndex = -1
            // 列循环
        for (let c = 0; c < lenTd; c++) {
            // 行循环
            for (let r = 0; r < lenTr - 1; r++) {
                let td = table.children('tr').eq(r).children('td').eq(c)
                let tdNext = table.children('tr').eq(r + 1).children('td').eq(c)
                // 判断内容相同时
                if (td.html() == tdNext.html()) {
                    if (rowIndex == -1) {
                        rowIndex = r
                    }
                    tdNext.addClass('hide')
                    sum++
                    // 内容不同时
                } else {
                    rowIndex = -1
                    sum = 1
                }
                table.children('tr').eq(rowIndex).children('td').eq(c).attr('rowspan', sum)
            }
            rowIndex = -1
            sum = 1
        }
    }
})



写代码犯错的位置

在这里插入图片描述



demo下载

[table表格依据数据内容相同时进行合并行单元格(https://download.csdn.net/download/weixin_42708208/12064024)



版权声明:本文为weixin_42708208原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_42708208/article/details/103759505