JS表格合并技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3561/article/details/81727967

合并表格的js

<html>   
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <title>合并表格</title>   
  <script>   
  ///////////////////////////////////////////////   
  //   功能：合并表格   
  //   参数：tb－－需要合并的表格ID   
  //   参数：colLength－－需要对前几列进行合并，比如，   
  //   想合并前两列，后面的数据列忽略合并，colLength应为2   
  //   缺省表示对全部列合并   
  //   data:   2005.11.6   
  ///////////////////////////////////////////////   
  function   uniteTable(tb,colLength){   
	  //   检查表格是否规整   
	if   (!checkTable(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;   
	  //   为每个单元格命名   
	for   (i=0;i<rowCount;i++){   
		for   (j=0;j<colCount;j++){   
			tb.rows[i].cells[j].id="tb__"   +   i.toString()   +   "_"   +   j.toString();   
	  	}   
	}   
  	//   逐列检查合并   
  	for   (i=0;i<colCount;i++){   
	  	if   (i==colLength)   return;   
	  	obj1=document.getElementById("tb__0_"+i.toString())   
	  	for   (j=1;j<rowCount;j++){   
	  		obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString());   
		  	if   (obj1.innerText   ==   obj2.innerText){   
		  		obj1.rowSpan++;   
		  		obj2.parentNode.removeChild(obj2);   
		  	}else{   
		  		obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString());   
		  	}   
	  	}   
  	}   
  }   
    
  /////////////////////////////////////////   
  //   功能：检查表格是否规整   
  //   参数：tb－－需要检查的表格ID   
  //   data:   2005.11.6   
  /////////////////////////////////////////   
  function   checkTable(tb){   
  	if   (tb.rows.length==0)   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 SpanGrid(tabObj,colIndex) {
 	if(tabObj != null) {
  		var i,j;
  		var intSpan;
  		var strTemp;
  		for(var m = 0; m <colIndex; m++ ){
	  		for(i = 0; i < tabObj.rows.length; i++) {
	   			intSpan = 1;
	   			strTemp = tabObj.rows[i].cells[m].innerText;
	   			for(j = i + 1; j < tabObj.rows.length; j++) {
	    			if(strTemp == tabObj.rows[j].cells[m].innerText) {
	     				intSpan++;
	     				tabObj.rows[i].cells[m].rowSpan  = intSpan;
	     				tabObj.rows[j].cells[m].style.display = "none";
	    			} else {
	     				break;
	    			}
	   			}
			i = j - 1;
	  		}
  		}
 	}
  }
  
  
  function SpanGrid2(tabObj,colIndex) {
 	if(tabObj != null) {
  		var i,j;
  		var intSpan;
  		var strTemp;
  		for(i = 0; i < tabObj.rows.length; i++) {
   			intSpan = 1;
   			strTemp = tabObj.rows[i].cells[m].innerText;
   			for(j = i + 1; j < tabObj.rows.length; j++) {
    			if(strTemp == tabObj.rows[j].cells[m].innerText) {
     				intSpan++;
     				tabObj.rows[i].cells[m].rowSpan  = intSpan;
     				tabObj.rows[j].cells[m].style.display = "none";
    			} else {
     				break;
    			}
   			}
		i = j - 1;
  		}
 	}
  }
  
  </script>   
  </head>   
    
  <body>   
  <table   width="400"   border="1"   id="table1">   
      <tr>   
          <td>a</td>   
          <td>for</td>   
          <td>100</td>   
          <td>200</td>   
      </tr>   
      <tr>   
          <td>a</td>   
          <td>for</td>   
          <td>100</td>   
          <td>200</td>   
      </tr>   
      <tr>   
          <td>a</td>   
          <td>if</td>   
          <td>100</td>   
          <td>200</td>   
      </tr>   
      <tr>   
          <td>a</td>   
          <td>if</td>   
          <td>300</td>   
          <td>240</td>   
      </tr>   
      <tr>   
          <td>a</td>   
          <td>if</td>   
          <td>320</td>    
          <td>320</td>  
      </tr> 
  </table>   
  <br>   
  <input   type="button"   value="合并表格"   onClick="SpanGrid(table1,2)">   
  </body>   
  </html>