改进版网页表格的合并单元格(支持不连续的列合并)
本脚本支持不连续的列合并,比如需要合并的列为1,3,5,或者是随意的N列,合并的只能是垂直方向的合并,不支持水平方向的合并。下面看代码:
<html> <script language="JavaScript"> /////////////////////////////////////////////// // 功能:合并表格 // 参数:tb--需要合并的表格ID // 参数:colBegin--需要合并的开始列序号 // 参数:colEnd--需要合并的结束列序号 // 注意:列序号由0开始。 /////////////////////////////////////////////// function unionTab(tb, colArray) { // 检查表格是否规整 if (!checkTab(tb)) return; var i = 0; var j = 0; var rowCount = tb.rows.length; // 行数 var colCount = tb.rows[0].cells.length; // 列数 var mergeCount=colArray.length;//合并的列数 var obj1 = null; var obj2 = null; var objtemp1=new Array(); var objtemp2=new Array(); //为每个单元格命名,表头不命名 for (i = 1; i < rowCount; i++) { for (j = 0; j < colCount; j++) { tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString(); } } var k=mergeCount-1; var i=0; //从后往前检查,进行逐列检查合并,开始列为colArray中最后的列序号。 for (f = k; f >= 0; f--) { i=colArray[f]; //当f>0时有前方的单元格(即要合并的列表的第一个列前面是不作判断的。) if (f>0) { //查找第一行单元格前几单元格,l为列值 for(l=0;l<f;l++) { objtemp1[l]=document.getElementById("tb_1_" + colArray[l].toString()); alert("单元格objtemp1,1_"+colArray[l].toString() + ",内容:" + objtemp1[l].innerText); } } //当前检查列的第一个记录。 obj1 = document.getElementById("tb_1_" + i.toString()); for (j = 2; j < rowCount; j++) { if (f > 0) { //查找当前单元格前几单元格,l为列值 for(l=0;l<f;l++){ objtemp2[l]=document.getElementById("tb_" + j.toString() + "_"+ colArray[l].toString()); } } //检测记录的下一条记录。 obj2 = document.getElementById("tb_" + j.toString() + "_"+ i.toString()); if (obj1.innerText == obj2.innerText) { if (f > 0) { if (checkArray(objtemp1,objtemp2)) { obj1.rowSpan++; obj2.parentNode.removeChild(obj2); } else { obj1 = document.getElementById("tb_" + j.toString()+ "_" + i.toString()); for(l=0;l<f;l++){ objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"+ colArray[l].toString()); } } } else { obj1.rowSpan++; obj2.parentNode.removeChild(obj2); } } else { obj1 = document.getElementById("tb_" + j.toString() + "_"+ i.toString()); for(l=0;l<f;l++){ objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"+ colArray[l].toString()); } } } } } ///////////////////////////////////////// // 功能:检查表格是否规整 // 参数:tb--需要检查的表格ID // /////////////////////////////////////// function checkTab(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; } //检查取出的值是否相等 function checkArray(arr1,arr2){ for(i=0;i<arr1.length;i++){ if(arr1[i].innerText==arr2[i].innerText){ }else{ return false; } } return true; } </script> <body> <table width="400" border="1" id="table1"> <tr> <td>人员</td> <td>总公司</td> <td>分公司</td> <td>部门</td> <td>科室</td> </tr> <tr> <td>1</td> <td>a总公司</td> <td>for分公司</td> <td>100部门</td> <td>200科室</td> </tr> <tr> <td>2</td> <td>a总公司</td> <td>for分公司</td> <td>100部门</td> <td>200科室</td> </tr> <tr> <td>3</td> <td>a总公司</td> <td>for分公司</td> <td>100部门</td> <td>201科室</td> </tr> <tr> <td>4</td> <td>a总公司</td> <td>for分公司</td> <td>100部门</td> <td>201科室</td> </tr> <tr> <td>5</td> <td>a总公司</td> <td>for分公司</td> <td>200部门</td> <td>201科室</td> </tr> <tr> <td>6</td> <td>a总公司</td> <td>for分公司</td> <td>200部门</td> <td>201科室</td> </tr> <tr> <td>7</td> <td>b总公司</td> <td>for分公司</td> <td>200部门</td> <td>201科室</td> </tr> <tr> <td>8</td> <td>b总公司</td> <td>for分公司</td> <td>200部门</td> <td>201科室</td> </tr> </table> <br> <input type="button" value="合并表格" onClick="unionTab(table1,[1,3,4])"> </body> <script language="JavaScript"> unionTab(table1,[1,3,4]); //unionTab(table1,3,3); </script> </html>
该脚本是从网上找了代码后,经过改进而来的。
原创作品出自努力偷懒,转载请说明文章出处:http://blog.csdn.net/kfarvid或 http://www.cnblogs.com/kfarvid/