前端頁面表格實現合並單元格

做報表，查詢的時候，經常用到表格。

頁面展示多條數據時，時常表格的第一列都是相同的，所以合並單元格，讓表格看起來更直觀。

頁面直接調用unionTab (tb,collength)函數;其中第一個參數tb為表格ID,第二個參數為你想要進行單元格合並的表格列數。

缺點：只能實現前N列，不能實現某一列實現合並。

/**/
 window.unionTab = function (tb, colLength) {
    var id = tb;
    tb = $("#" + tb).get(0);
    //   檢查表格是否規整     
    if (!checkTab(tb)) {
        return;
    }
    var i = 0;
    var j = 0;
    var l = 0;
    var rowCount = tb.rows.length; // 行數  
    var colCount = tb.rows[0].cells.length; // 列數  
    var obj1 = null;
    var obj2 = null;
    var objtemp1 = [];
    var objtemp2 = [];

    //為每個單元格命名,表頭不命名  
    for (i = 1; i < rowCount; i++) {
        for (j = 0; j < colCount; j++) {
            tb.rows[i].cells[j].id = id + "tb_" + i.toString() + "_" + j.toString();
        }
    }
    var k = colLength - 1;
    //從后往前檢查，進行逐列檢查合並,開始列為colLength-1  
    for (i = k; i >= 0; i--) {
        //當i>0時有前方的單元格  
        if (i > 0) {
            //查找當前單元格前幾單元格,l為列值  
            for (l = 0; l < i; l++) {
                objtemp1[l] = document.getElementById(id + "tb_1_" + l.toString());
                //alert("單元格objtemp1,1_" + l.toString() + ",內容:" + objtemp1[l].innerText);
            }
        }
        obj1 = document.getElementById(id + "tb_1_" + i.toString());
        for (j = 2; j < rowCount; j++) {
            if (i > 0) {
                //查找當前單元格前幾單元格,l為列值  
                for (l = 0; l < i; l++) {
                    objtemp2[l] = document.getElementById(id + "tb_" + j.toString() + "_" + l.toString());
                }
            }
            obj2 = document.getElementById(id + "tb_" + j.toString() + "_" + i.toString());
            if (obj1.innerText === obj2.innerText) {
                if (i > 0) {
                    if (checkArray(objtemp1, objtemp2)) {
                        obj1.rowSpan++;
                        obj2.parentNode.removeChild(obj2);
                    } else {
                        obj1 = document.getElementById(id + "tb_" + j.toString() + "_" + i.toString());
                        for (l = 0; l < i; l++) {
                            objtemp1[l] = document.getElementById(id + "tb_" + j.toString() + "_" + l.toString());
                        }
                    }
                } else {
                    obj1.rowSpan++;
                    obj2.parentNode.removeChild(obj2);
                }

            } else {
                obj1 = document.getElementById(id + "tb_" + j.toString() + "_" + i.toString());
            }
        }
    }
};
 /////////////////////////////////////////     
 // 功能：檢查表格是否規整  
 // 參數：tb－－需要檢查的表格ID  
 // ///////////////////////////////////////  
 window.checkTab = function (tb) {
     if (tb.rows.length === 0) {
         return false;
     }
     //如果只有一行表頭也返回false  
     if (tb.rows.length === 1) {
         return false;
     }
     if (tb.rows[0].cells.length === 0) {
         return false;
     }
     for (var i = 0; i < tb.rows.length; i++) {
         if (tb.rows[0].cells.length !== tb.rows[i].cells.length) {
             return false;
         }
     }
     return true;
 };

 //檢查取出的值是否相等  
 window.checkArray = function (arr1, arr2) {
     for (var i = 0; i < arr1.length; i++) {
         if (arr1[i].innerText === arr2[i].innerText) {

         } else {
             return false;
         }
     }
     return true;
 };