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


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

  • 相关阅读:
    【09】绝不在构造和析构过程中调用virtual方法
    【08】别让异常逃离析构函数
    C++ 外部调用private方法
    【07】为多态基类声明virtual析构方法
    C++ 构造过程和析构过程
    理解C# Lazy<T>
    DG
    MongoDB
    sh.status()
    DG
  • 原文地址:https://www.cnblogs.com/kfarvid/p/3096976.html
Copyright © 2020-2023  润新知