html做表格 合并单元格,前端页面表格实现合并单元格
/**/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;
};