使用js多級次合併單元格
阿新 • • 發佈：2019-01-07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格相同內容合併</title> </head> <body> 合併前： <table width="400" border="1"> <tbody> <tr> <th>c1</th> <th>c2</th> <th>c3</th> <th>c4</th> <th>c5</th> <th>c6</th> </tr> <tr> <td>a</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>a</td> <td>1</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>a</td> <td>2</td> <td>3</td> <td>3</td> <td>4</td> <td> </td> </tr> <tr> <td>a</td> <td>2</td> <td>4</td> <td>5</td> <td>6</td> <td> </td> </tr> <tr> <td>b</td> <td>3</td> <td>4</td> <td>6</td> <td>7</td> <td> </td> </tr> <tr> <td>b</td> <td>3</td> <td>5</td> <td>6</td> <td>7</td> <td> </td> </tr> <tr> <td>cc</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td> </td> </tr> <tr> <td>cc</td> <td>2</td> <td>3</td> <td>5</td> <td>5</td> <td> </td> </tr> <tr> <td>d</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td> </td> </tr> <tr> <td>e</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td> </td> </tr> </tbody> </table> <br /> 合併後： <br /> <table width="400" border="1" id="table1"> <tbody> <tr> <th>c1</th> <th>c2</th> <th>c3</th> <th>c4</th> <th>c5</th> <th>c6</th> </tr> <tr> <td>a</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>a</td> <td>1</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>a</td> <td>2</td> <td>3</td> <td>3</td> <td>4</td> <td> </td> </tr> <tr> <td>a</td> <td>2</td> <td>4</td> <td>5</td> <td>6</td> <td> </td> </tr> <tr> <td>b</td> <td>3</td> <td>4</td> <td>6</td> <td>7</td> <td> </td> </tr> <tr> <td>b</td> <td>3</td> <td>5</td> <td>6</td> <td>7</td> <td> </td> </tr> <tr> <td>cc</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td> </td> </tr> <tr> <td>cc</td> <td>2</td> <td>3</td> <td>5</td> <td>5</td> <td> </td> </tr> <tr> <td>d</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td> </td> </tr> <tr> <td>e</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td> </td> </tr> </tbody> </table> <script type="text/javascript"> //多級次動態合併表格行 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'); </script> </body> </html>