layui---合并单元格_layui tablemerge-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42804880/article/details/88880619

本文介绍了一种使用JavaScript实现的表格数据合并方法。通过比较相邻行的数据，实现对相同内容单元格的合并，并设置rowspan属性来展示。此方法适用于需要简化大量重复数据展示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function merge(res, cur, count,colum,index) {
    var data = res.data;
    var mergeIndex = 0;//定位需要添加合并属性的行数
    var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
    var columsName = colum;//需要合并的列名称
    var columsIndex = index;//需要合并的列索引值

    for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列
    {
        var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
        for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
            var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
            var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
            if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                console.log(data[i][columsName[k]]);
                console.log(data[i - 1][columsName[k]]);
                mark += 1;
                tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                    $(this).attr("rowspan", mark);
                });
                tdCurArr.each(function () {//当前行隐藏
                    $(this).css("display", "none");
                });
            }else {
                mergeIndex = i;
                mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
            }
        }
    }
}