JS实现合并div单元格

Posted 2023-04-04

我的页面全是div+css，数据是从数据库里循环取出来的，我想要我的某一列相同的内容合并！在网上找的资料全是table合并，有没有高手解答下div拼成的表格怎么合并。

html页面上做表格合并是很蛋疼的事、表格选中都是问题。
我做Table做单元格仿Excele合并、删除操作。。。。无果。
用Table单元格做合并,如果有条件让单元格选中的话,可以操作rowspan和colspan属性进行、、
用div更疼了、、、、、合并的话就是要改变页面代码，两个div合并、还不如选择用Table、何况你刚才说你在网上找的资料都是talbe合并的。。好歹有个参考。 参考技术A div没有合并这一说，所以要合并的话，那就把你的div改成table呗

前端页面表格实现合并单元格

做报表，查询的时候，经常用到表格。

页面展示多条数据时，时常表格的第一列都是相同的，所以合并单元格，让表格看起来更直观。

写这个函数，其它js里面直接调用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;
 };