改进版网页表格的合并单元格(支持不连续的列合并)

本脚本支持不连续的列合并,比如需要合并的列为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/

 

posted @   努力偷懒  阅读(559)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2010-05-24 iframe 高度自动调节
点击右上角即可分享
微信分享提示