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

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)

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值