table 单元格合并

table 元素合并单元格,用法倒是很简单,但过程中遇到了点小问题,记录下:

1、多行多列合并,使用  rowSpan、colSpan 设置要合并的行列数,再将合并后的多余单元格删除即可:

function merge(table, px, py, row, col, remove = true) {
        py--;
        let target = table.rows[px].cells[py];
        target.rowSpan = row;
        target.colSpan = col;
        // 删除 被合并的单元格
        for (let i = row - 1; i >= 0; i --) {
            for (let j = col - 1; j >= 0; j --) {
                // 同行的合并行,删除非本身
                if (i === 0 && j === 0) {
                } else {
                    remove && (table.rows[px + i].removeChild(table.rows[px + i].cells[py + j]));
                }
            }
        }
    }

2、设置合并,看效果:

// 手动合并,起始点[行,列],行数,列数,倒着处理
merge(table, 4, 4, 3, 2);
merge(table, 4, 2, 2, 2);
merge(table, 4, 1, 3, 1);

3、在合并交错行单元格时,则遇到了错乱的问题:

merge(table, 2, 5, 2, 2);
merge(table, 1, 1, 2, 4);

4、做了个不删除的单元格看了下对比,发现第二行整体都没了,导致了格子没撑起来:

5、做个第7列,设置隐藏,保证删掉合并的单元格后,每行都有单个未合并的单元格存在,布局就不会错乱:

 

posted @ 2024-10-08 10:13  名字不好起啊  阅读(223)  评论(0编辑  收藏  举报