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

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

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

页面直接调用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;
};