欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端:JS中表格合并单元格(列)

程序员文章站 2022-06-14 09:36:24
...
/**
 * 列合并单元格(如果结束行传0代表合并所有行)
 * @param table     表格的ID
 * @param startRow  起始行
 * @param endRow    结束行
 * @param col       合并的列号,对第几列进行合并(从0开始)。第一行从0开始
 */
function mergeCell(table, startRow, endRow, col) {
    var tb = document.getElementById(table);
    if(!tb || !tb.rows || tb.rows.length <= 0) {
        return;
    }
    if(col >= tb.rows[0].cells.length || (startRow >= endRow && endRow != 0)) {
        return;
    }
    if(endRow == 0) {
        endRow = tb.rows.length - 1;
    }
    for(var i = startRow; i < endRow; i++) {
        //如果相等就合并单元格,合并之后跳过下一行
        if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) { 
            tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[6]);		// 合并第6列
            tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[5]);		// 合并第5列
            tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[4]);		// 合并第4列
            tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[3]);		// 合并第3列
            tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[col]);		// 合并第1列
            tb.rows[startRow].cells[6].rowSpan = (tb.rows[startRow].cells[6].rowSpan) + 1;
            tb.rows[startRow].cells[5].rowSpan = (tb.rows[startRow].cells[5].rowSpan) + 1;
            tb.rows[startRow].cells[4].rowSpan = (tb.rows[startRow].cells[4].rowSpan) + 1;
            tb.rows[startRow].cells[3].rowSpan = (tb.rows[startRow].cells[3].rowSpan) + 1;
            tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan) + 1;
        } else {
            mergeCell(table, i + 1, endRow, col);
            break;
        }
    }
}

// 调用合并单元格方法
 mergeCell("myTable",0,0,0)		// 默认合并第一列