js動態的合併table的單元格
阿新 • • 發佈:2019-02-15
//多級次動態合併表格行
function checkArray(arr1,arr2){
for (var i = 0; i < arr1.length; i++) {
if (arr1[i].innerText===arr2[i].innerText) {
}else{
return false;
}
}
return true;
}
function dynamicMergeTableRow(tableId){
var tb = document.getElementById(tableId);
var obj1;
var obj2;
var objtemp1 = [];
var objtemp2 = [];
var rowCount = tb.rows.length;
console.info(rowCount);
var colCount = tb.rows[0 ].cells.length;
console.info(rowCount);
var colLength = 4;
//命名(表頭除外)
for (var i = 1; i < rowCount; i++) {
for (var j = 0; j < colCount; j++) {
tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString();
}
}
//從後往前檢查,進行逐列檢查合併,開始列為colLength-1
for (var col = colLength -1; col >= 0; col--) {
//當col>0時有前方的單元格
if (col > 0) {
//objtemp1為obj1左側所有單元格集合,初始objtemp1及obj1均從第二行開始(tb_1_)
for (var l = 0; l < col; l++) {
objtemp1[l] = document.getElementById("tb_1_" + l.toString());
}
}
obj1 = document.getElementById("tb_1_" + col.toString());
//obj2為obj1下方單元格,obj1從第二行開始,則obj2從第三行開始,遍歷以row=2為起始值
for (var row = 2; row < rowCount; row++) {
//同obj1及objtemp1,col>0:即有前方單元格,此時有objtemp2
if (col > 0) {
for (var l = 0; l < col; l++) {
objtemp2[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
}
}
obj2 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());
//定義完obj1/obj2/objtemp1/objtemp2後,開始合併
//第一層判斷:當obj1的值等於obj2時,即同一列的相鄰單元格值相同
if (obj1.innerText == obj2.innerText) {
//第二層判斷:obj1/obj2所在列前方還有其他列:即col>0(此步判斷為單元格合併的依賴性提供支援)
if (col > 0) {
//第三層判斷:obj1/obj2所在列前方還有其他列,且objtemp1,objtemp2值完全相同,可以合併
if (checkArray(objtemp1,objtemp2)) {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
}
//第三層判斷:obj1/obj2所在列前方還有其他列,且objtemp1,objtemp2值不同,不可合併,並重新對obj1/objtemp1賦值,令其等於原來的obj2/objtemp2
else{
obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());
for (var l = 0; l < col; l++) {
objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
}
}
}
//第二層判斷:obj1/obj2所在列為首列,直接合並
else{
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
}
}
//第一層判斷:當obj1的值不等於obj2時,即同一列的相鄰單元格值不相,此時重新對obj1/objtemp1賦值,令其等於原來的obj2/objtemp2
else{
obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());
for (var l = 0; l < col; l++) {
objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
}
}
}
objtemp1 = [];
objtemp2 = [];
}
}
dynamicMergeTableRow('table1');