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列,设置隐藏,保证删掉合并的单元格后,每行都有单个未合并的单元格存在,布局就不会错乱: