学步园

   表格中经常会有不规则的表格出现，收集了点网上写的合并单元格的js代码，感觉可以扩展，于是就试着扩展了一下，

不过只能合并表格中的数据时有规律的数据，不能进行任意合并。

   下面是些写的脚本代码

Js代码
 

1.  ///////////////////////////////////////////////   
     
2.   //   功能：合并表格      
3.   //   参数：tb－－需要合并的表格ID      
4.   //   参数：colLength－－需要对前几列进行合并，比如，      
5.   //   想合并前两列，后面的数据列忽略合并，colLength应为2         
6.   ///////////////////////////////////////////////   
     
7.  function unionTab(tb, colLength) {   
8.     //   检查表格是否规整      
9.     if (!checkTab(tb))   
10.         return;   
11.     var i = 0;   
12.     var j = 0;   
13.     var rowCount = tb.rows.length; // 行数  
14.     var colCount = tb.rows[0].cells.length; // 列数  
15.     var obj1 = null;   
16.     var obj2 = null;   
17.     var objtemp1=new Array();   
18.     var objtemp2=new Array();   
19.        
20.     //为每个单元格命名,表头不命名   
21.     for (i = 1; i < rowCount; i++) {   
22.         for (j = 0; j < colCount; j++) {   
23.             tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString();   
24.         }   
25.     }   
26.     var k=colLength-1;   
27.     //从后往前检查，进行逐列检查合并,开始列为colLength-1   
28.     for (i = k; i >= 0; i--) {   
29.         //当i>0时有前方的单元格   
30.         if (i > 0) {   
31.             //查找当前单元格前几单元格,l为列值   
32.             for(l=0;l<i;l++)   
33.             {   
34.                 objtemp1[l]=document.getElementById("tb_1_" + l.toString());   
35.                 alert("单元格objtemp1,1_"+l.toString() + ",内容:" + objtemp1[l].innerText);   
36.             }   
37.         }   
38.         obj1 = document.getElementById("tb_1_" + i.toString());   
39.                 for (j = 2; j < rowCount; j++) {   
40.             if (i > 0) {   
41.                 //查找当前单元格前几单元格,l为列值   
42.                 for(l=0;l<i;l++){   
43.                     objtemp2[l]=document.getElementById("tb_" + j.toString() + "_"  
44.                             + l.toString());   
45.                                     }   
46.             }   
47.             obj2 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());   
48.     if (obj1.innerText == obj2.innerText) {   
49.                 if (i > 0) {   
50.                     if (checkArray(objtemp1,objtemp2)) {   
51.                         obj1.rowSpan++;   
52.                         obj2.parentNode.removeChild(obj2);   
53.                     } else {   
54.                         obj1 = document.getElementById("tb_" + j.toString()   
55.                                 + "_" + i.toString());   
56.                                                 for(l=0;l<i;l++){   
57.                             objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"  
58.                                     + l.toString());   
59.                                                     }   
60.                     }   
61.                 } else {   
62.                     obj1.rowSpan++;   
63.                     obj2.parentNode.removeChild(obj2);   
64.                 }   
65.   
66.             } else {   
67.                 obj1 = document.getElementById("tb_" + j.toString() + "_"  
68.                         + i.toString());   
69.             }   
70.         }   
71.     }   
72. }   
73.   
74. /////////////////////////////////////////      
75. // 功能：检查表格是否规整   
76. // 参数：tb－－需要检查的表格ID   
77. // ///////////////////////////////////////   
78. function checkTab(tb) {   
79.     if (tb.rows.length == 0)   
80.         return false;   
81.     //如果只有一行表头也返回false   
82.     if(tb.rows.length==1)   
83.         return false;   
84.     if (tb.rows[0].cells.length == 0)   
85.         return false;   
86.     for ( var i = 0; i < tb.rows.length; i++) {   
87.         if (tb.rows[0].cells.length != tb.rows[i].cells.length)   
88.             return false;   
89.     }   
90.     return true;   
91. }   
92.   
93. //检查取出的值是否相等   
94. function checkArray(arr1,arr2){   
95.     for(i=0;i<arr1.length;i++){   
96.         if(arr1[i].innerText==arr2[i].innerText){   
97.                
98.         }else{   
99.             return false;   
100.         }      
101.     }   
102.     return true;   
103. }  

 ///////////////////////////////////////////////   
  //   功能：合并表格   
  //   参数：tb－－需要合并的表格ID   
  //   参数：colLength－－需要对前几列进行合并，比如，   
  //   想合并前两列，后面的数据列忽略合并，colLength应为2      
  ///////////////////////////////////////////////   
 function unionTab(tb, colLength) {
	//   检查表格是否规整   
	if (!checkTab(tb))
		return;
	var i = 0;
	var j = 0;
	var rowCount = tb.rows.length; // 行数
	var colCount = tb.rows[0].cells.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=colLength-1;
	//从后往前检查，进行逐列检查合并,开始列为colLength-1
	for (i = k; i >= 0; i--) {
	    //当i>0时有前方的单元格
		if (i > 0) {
			//查找当前单元格前几单元格,l为列值
			for(l=0;l<i;l++)
			{
				objtemp1[l]=document.getElementById("tb_1_" + l.toString());
				alert("单元格objtemp1,1_"+l.toString() + ",内容:" + objtemp1[l].innerText);
			}
		}
		obj1 = document.getElementById("tb_1_" + i.toString());
				for (j = 2; j < rowCount; j++) {
			if (i > 0) {
				//查找当前单元格前几单元格,l为列值
				for(l=0;l<i;l++){
					objtemp2[l]=document.getElementById("tb_" + j.toString() + "_"
							+ l.toString());
									}
			}
			obj2 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());
	if (obj1.innerText == obj2.innerText) {
				if (i > 0) {
					if (checkArray(objtemp1,objtemp2)) {
						obj1.rowSpan++;
						obj2.parentNode.removeChild(obj2);
					} else {
						obj1 = document.getElementById("tb_" + j.toString()
								+ "_" + i.toString());
												for(l=0;l<i;l++){
							objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"
									+ l.toString());
													}
					}
				} else {
					obj1.rowSpan++;
					obj2.parentNode.removeChild(obj2);
				}

			} else {
				obj1 = document.getElementById("tb_" + j.toString() + "_"
						+ i.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;
}

 以上脚本可以处理像如下表格中的数据，表格中相同内容的单元格会进行合并，并具有依赖性。

即只有依赖列相同，才会进行合并。

Html代码
 

1. <html>  
2. <body>      
3.   <table   width="400"   border="1"   id="table1">   
     
4.        <tr>      
5.           <td>总公司</td>      
6.           <td>分公司</td>      
7.           <td>部门</td>      
8.           <td>科室</td>    
9.           <td>人员</td>      
10.       </tr>      
11.       <tr>      
12.           <td>a总公司</td>      
13.           <td>for分公司</td>      
14.           <td>100部门</td>      
15.           <td>200科室</td>  
16.           <td>1</td>  
17.       </tr>      
18.       <tr>      
19.           <td>a总公司</td>      
20.           <td>for分公司</td>      
21.           <td>100部门</td>  
22.           <td>200科室</td>  
23.           <td>2</td>  
24.       </tr>      
25.       <tr>      
26.          <td>a总公司</td>      
27.           <td>for分公司</td>      
28.           <td>100部门</td>  
29.           <td>201科室</td>  
30.           <td>3</td>    
31.       </tr>  
32.        <tr>      
33.          <td>a总公司</td>      
34.           <td>for分公司</td>      
35.           <td>100部门</td>  
36.           <td>201科室</td>  
37.           <td>4</td>    
38.       </tr>  
39.       <tr>      
40.          <td>a总公司</td>      
41.           <td>for分公司</td>      
42.           <td>200部门</td>  
43.           <td>201科室</td>  
44.           <td>5</td>    
45.       </tr>  
46.       <tr>      
47.          <td>a总公司</td>      
48.           <td>for分公司</td>      
49.           <td>200部门</td>  
50.           <td>201科室</td>  
51.           <td>6</td>    
52.       </tr>  
53.       <tr>      
54.          <td>b总公司</td>      
55.           <td>for分公司</td>      
56.           <td>200部门</td>  
57.           <td>201科室</td>  
58.           <td>7</td>    
59.       </tr>  
60.        <tr>      
61.          <td>b总公司</td>      
62.           <td>for分公司</td>      
63.           <td>200部门</td>  
64.           <td>201科室</td>  
65.           <td>8</td>    
66.       </tr>  
67.   </table>      
68.   <br>      
69.   <input   type="button"   value="合并表格"   onClick="unionTab(table1,4)">   
      
70.   </body>      
71.   </html>