使用js方法將table表格中指定列指定行中相同內容的單元格進行合並操作。

前言

使用js方法對html中的table表格進行單元格的行列合並操作。

網上執行此操作的實例方法有很多，但根據實際業務的區別，大多不適用。

所以在網上各位大神寫的方法的基礎上進行了部分修改以適合自己業務中的使用。

js方法

function MergeTableCell(tableId, startRow, endRow, col) {
    var tb = document.getElementById(tableId);
    //設置為0時,檢索所有行
    if (endRow == 0) {
        endRow = tb.rows.length - 1;
    }
    //指定數據行索引大於表格行數
    if (endRow >= tb.rows.length) {
        return;
    }
    //檢測指定的列索引是否超出表格列數
    if (col >= tb.rows[0].cells.length) {
        return;
    }
    //循環需要判斷的數據行
    for (var i = startRow; i < endRow; i++) {
        //如果當前行與下一行數據值相同，則進行前面列的判斷
        if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
            var Same = true;
            //循環跟前面的所有的同級數據行進行判斷
            for (var j = col; j > 0; j--) {
                if (tb.rows[startRow].cells[j - 1].innerHTML != tb.rows[i + 1].cells[j - 1].innerHTML) {
                    Same = false;
                    break;
                }
            }
            //如果前面的同級數據行的值均相同，則進行單元格的合並
            if (true == Same) {
                //如果相同則刪除下一行的第0列單元格  
                tb.rows[i + 1].cells[col].style.display = 'none';
                //更新rowSpan屬性  
                tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
            }
            else {
                //增加起始行  
                startRow = i + 1;
            }
        }
        else {
            //增加起始行  
            startRow = i + 1;
        }
    }
}

說明

1、Function:合並表格相同行的內容
2、Parameter:
tableId：表格id,
startRow：起始行(索引0開始)如果有標題行則填寫1
endRow：終止行(索引值)如果填寫0則自動賦值
col：需要處理的列(索引值)
3、Example
MergeTableCell("table_test", 2, 0, 1);
Para1:table_test,table表格的id
Para2:2,開始行的索引值
Para3:0,結束行的索引值
Para4:1,需要處理的列的索引值
4、Worning
(1)合並一列，正常調用
示例:MergeTableCell("table_test", 2, 0, 0);
(2)合並多列，需要將待處理的列從大到小排列
示例:合並第一列和第二列
MergeTableCell("table_test", 2, 0, 1);
MergeTableCell("table_test", 2, 0, 0);
原因:
合並第二列時，需要判斷第一列的值是否相同，
如果第一列的值不相同，則不進行合並。
table   col1    col2
row1    安徽    省
row2    浙江    省
如上，雖然第二列的值都為"省"，
但是第一列的值不相同，所以不進行單元格的合並。
原理:
合並時會當前列的兩行數據與前面列的同級兩行是否一致，
如果一致才會進行合並。
如果先進行合並第一列的值，
后面合並時判斷前面的列值是否一致時，所獲取到的前面列的值就是空，
也就無法正常的判斷的值是否一致了。