datatable 动态合并相同行单元格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了datatable 动态合并相同行单元格相关的知识，希望对你有一定的参考价值。
参考技术A 1.先建立一个datatable表格：2.通过ajax获得表格数据，我只截取了简单的一段，如果不知道用datatablle的可以去百度一下用法，这个我主要是想说明在数据初始化的时候调用hide方法，然后将多余单元格去掉。这个是表格是没有分页的；
3.合并单元格的方法，hide方法
4.大功告成，看下成果，原谅我不太清晰，因为公司网络管控比较严，我手机用手机拍的照片。
js 按相同行合并table单元格
查到的合并的代码
1 function combineRows(tableid) { 2 var tab = document.getElementById(tableid); 3 var maxcol = 4, count, value, start; 4 for (var col = maxcol; col >= 0; col--) { 5 count = 1; 6 value = ""; 7 for (var i = 1; i < tab.rows.length; i++) { 8 9 var temp = tab.rows[i].cells[col]; 10 if (temp == null || typeof (temp) == "undefine") { 11 continue; 12 } 13 if (value == tab.rows[i].cells[col].innerHTML) { 14 count++; 15 } 16 else { //合并 17 if (count > 1) { 18 start = i - count; 19 tab.rows[start].cells[col].rowSpan = count; 20 for (var j = start + 1; j < i; j++) { 21 tab.rows[j].deleteCell(col); 22 } 23 count = 1; 24 } 25 value = tab.rows[i].cells[col].innerHTML; 26 27 } 28 } 29 if (count > 1) { //合并，最后几行相同的情况下 30 start = i - count; 31 tab.rows[start].cells[col].rowSpan = count; 32 33 for (var j = start + 1; j < i; j++) { 34 tab.rows[j].deleteCell(col); 35 } 36 } 37 38 } 39 }
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>合并表格</title> 5 <script> 6 /////////////////////////////////////////////// 7 //功能：合并表格 8 //参数：tb－需要合并的表格ID 9 //参数：colLength－－需要对前几列进行合并，比如， 10 //想合并前两列，后面的数据列忽略合并，colLength应为2 11 //缺省表示对全部列合并 12 //data:2011.11.06 13 /////////////////////////////////////////////// 14 function uniteTable(tb, colLength) { 15 //检查表格是否规整 16 if (!checkTable(tb)) return; 17 var i = 0; 18 var j = 0; 19 var rowCount = tb.rows.length; //行数 20 var colCount = tb.rows[0].cells.length; //列数 21 var obj1 = null; 22 var obj2 = null; 23 //为每个单元格命名 24 for (i = 0; i < rowCount; i++) { 25 for (j = 0; j < colCount; j++) { 26 tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString(); 27 } 28 } 29 //逐列检查合并 30 for (i = 0; i < colCount; i++) { 31 if (i == colLength) return; 32 obj1 = document.getElementById("tb__0_" + i.toString()) 33 for (j = 1; j < rowCount; j++) { 34 obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString()); 35 if (obj1.innerText == obj2.innerText) { 36 obj1.rowSpan++; 37 obj2.parentNode.removeChild(obj2); 38 } else { 39 obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString()); 40 } 41 } 42 } 43 } 44 45 ///////////////////////////////////////// 46 //功能：检查表格是否规整 47 //参数：tb－－需要检查的表格ID 48 //data: 2011.11.06 49 ///////////////////////////////////////// 50 function checkTable(tb) { 51 if (tb.rows.length == 0) return false; 52 if (tb.rows[0].cells.length == 0) return false; 53 for (var i = 0; i < tb.rows.length; i++) { 54 if (tb.rows[0].cells.length != tb.rows[i].cells.length) return false; 55 } 56 return true; 57 } 58 </script> 59 </head> 60 <body> 61 <table width="400" border="1" id="table1"> 62 <tr> 63 <td>列名1</td> 64 <td>列名2</td> 65 <td>列名3</td> 66 <td>列名4</td> 67 <td>列名5</td> 68 </tr> 69 <tr> 70 <td>a</td> 71 <td>for</td> 72 <td>100</td> 73 <td>200</td> 74 <td>1</td> 75 </tr> 76 <tr> 77 <td>a</td> 78 <td>for</td> 79 <td>100</td> 80 <td>300</td> 81 <td>2</td> 82 </tr> 83 <tr> 84 <td>a</td> 85 <td>if</td> 86 <td>100</td> 87 <td>200</td> 88 <td>3</td> 89 </tr> 90 <tr> 91 <td>a</td> 92 <td>if</td> 93 <td>300</td> 94 <td>230</td> 95 <td>4</td> 96 </tr> 97 <tr> 98 <td>a</td> 99 <td>if</td> 100 <td>320</td> 101 <td>230</td> 102 <td>5</td> 103 </tr> 104 </table> 105 <br> 106 <input type="button" value="合并表格" onclick="uniteTable(table1, 4)"> 107 </body> 108 </html>
以上是关于datatable 动态合并相同行单元格的主要内容，如果未能解决你的问题，请参考以下文章