1. 程式人生 > >【js】動態合併表格

【js】動態合併表格

//動態合併表格
//傳入引數:tableObj(表格ID);
//childNodeIndexs:需要合併的列索引可傳多列索引用逗號分割如:(‘0,1,2’表示合併表格的一二三列資料,注意傳入索引時必須按照

從前往後的順序)
function setRowSpan(tableObj,childNodeIndexs){
	 try{
  	    var childNodeIndex; //定義需要合併的索引陣列
		//如果傳進來的索引不為空就已傳進來的索引進行合併,否則就按照表格的第一列進行合併
		if(childNodeIndexs!=null){
			childNodeIndex=childNodeIndexs.split(",");
		}else{
			childNodeIndex[0]='0';
		} 
		//得到需要合併的表格物件
		var tableObj = document.getElementById(tableObj); 
		//得到表格的tbody包體物件
		var nodes=tableObj.childNodes[1].childNodes; 
		var objList= new Array() ;
		var c = 1;
		//對包體中表格的列進行迴圈
		for(var k=0;k<nodes.length;k++){  
			//得到當前行的值
			var curValue=nodes[k].childNodes[parseInt(childNodeIndex[0])].innerHTML; 
			//定義下一行的值
			var nextValue=""; 
			if(nodes[k+1]!=null){
				nextValue=nodes[k+1].childNodes[parseInt(childNodeIndex[0])].innerHTML;
			}   
			//如果當前行的值和下一行值相等則把需要合併行的數目加"1",並把下一行的物件放到集合中
			 if(curValue == nextValue){
			    objList.push(nodes[k+1].childNodes[parseInt(childNodeIndex[0])]);
			  	c++; 
			  }else{ 
			  	//如果當前行的值和下一行的值不行等,則從值相等的那一行的td進行行合併rowSpan=c(c:表示判斷值

相等的次數預設為1)
			  	for(var i=0;i<childNodeIndex.length;i++){
					nodes[k-c+1].childNodes[parseInt(childNodeIndex[i])].rowSpan=c; 
				}
				//迴圈把合併行的單元格移除,直流最後一行
				for(var d=0;d<objList.length;d++){
				   var pNode=objList[d].parentNode; 
				   //定義移除單元格的次數,母的每移除一個單元格,之前的索引要減去"1"
				   var index=0;
				     for(var i=0;i<childNodeIndex.length;i++){
						pNode.removeChild(pNode.childNodes[parseInt(childNodeIndex[i]-index)]); 
						index++;
					}
				}
				//重置變數初始值
				c=1;
				objList=new Array();
			  }
	   } 
	 }catch(e){
        return false;
    }  	
}
<script>
	//頁面載入時,呼叫公共的js用於表格顯示合併相同課程教學班
	setRowSpan("row",'0');
</script>