編集可能なセルの自動結合表

Nは長い間来ていませんでした.最近のプロジェクトではレポートを使って、セルが自動的に結合され、修正がサポートされています.改ページ後に表を再生成します.ここに小さなプラグインを書いて記録します.(コードがちょっとくどい感じがします.階層がちょっと複雑で、構造がよく分かりません.もっと最適化する必要があります.)
 
添付の内容:コード、テストページ、操作のスクリーンショット
 
コードは以下の通りです

/*
          、           
TableView：   ，
	         
	this.data:      ，         ，     ，     
	this.columns: Column    ，       ，    ，    （     ），     
	this.tableName:          ，           Id
	this.noDataStr:       ，       。
	
Column:     ，              
	this.isHidden：    
	this.isMerged：      
	this.mergeConditions：    ，   MergeCondition   
	this.isModified：      
	
MergeCondition：     ，               
	this.columnIndex：   ， 0  ，       
	this.conditionType：    ，         （“eq”）,      

*/
//     table 
TableView = function(config){
	this.data = config.data;
	this.columns = config.columns;
	this.tableName = config.tableName;
	this.noDataStr = config.noDataStr?noDataStr:"  ，          ";
}
TableView.prototype.paint = function(){
	if(this.tableName==null || this.columns==null || this.columns.length<1)return;
	var __table = getE(this.tableName);
	if(__table==null)return;
	//       
	if(this.data==null || this.data.length<1){
		var __tr = __table.insertRow(-1);
		var __td = __tr.insertCell(-1);
		__td.innerHTML = this.noDataStr;
		var colNum = 0;
		for(var j=0; j<this.columns.length; j++){
			if(!this.columns[j].isHidden){
				colNum++;
			}
		}
		__td.setAttribute("colSpan", colNum);
		return;
	}
	//    
	//       Id，   td
	var __mergeColumn = [];
	//         
	var __mergeNum = [];
	for(var i=0; i<this.data.length; i++){
		var __rowData = this.data[i];
		var __tr = __table.insertRow(-1);
		for(var j=0; j<this.columns.length; j++){
			var __createFlag = true;
			var __column = this.columns[j];
			/*
			       ，         ，
			      ，
				                 ，
				    ，    
				     ，       
			*/
			//          Id
			var __id = getColStr(j)+"_"+i;
			if(__column.isMerged){
				//     
				if(i>0&&__column.mergeConditions){
					for(var k=0; k<__column.mergeConditions.length; k++){
						var con = __column.mergeConditions[k];
						if(con.columnIndex>=0 && (!con.conditionType || con.conditionType=="eq")){
							__createFlag = this.data[i][con.columnIndex]!=this.data[i-1][con.columnIndex];
						}
						if(__createFlag)break;
					}
				}
			}	
			
			if(__createFlag){
				if(__column.isHidden){
					var __input = document.createElement("input");
					__input.setAttribute("id", __id);
					__input.setAttribute("name", __id);
					__input.setAttribute("type", "hidden");
					__input.setAttribute("value", __rowData[j]);
					__table.appendChild(__input);
				}else{
					var __td = __tr.insertCell(-1);
					__td.innerHTML = __rowData[j];
					__td.setAttribute("id", __id);
					__td.setAttribute("name", __id);
					//          ，      
					if(__column.isModified){
						//        
						__td.ondblclick = function(event){
							var __tdinput = document.createElement("input");
							__tdinput.setAttribute("id", "temp_input");
							__tdinput.setAttribute("name", "temp_input");
							__tdinput.setAttribute("type", "text");
							var td;
							if(event==null){
								td=window.event.srcElement;
							}else{
								td=event.target;
							}
							__tdinput.setAttribute("value", td.innerHTML);
							td.innerHTML = "";
							td.appendChild(__tdinput);
							__tdinput.focus();
							__tdinput.select();
							
							//        ，          
							__tdinput.onblur = function(event){
								var td;
								if(event==null){
									td=window.event.srcElement.parentNode;
								}else{
									td=event.target.parentNode;
								}
								td.innerHTML = getE("temp_input").value;
							}
							//      ，          
							__tdinput.onkeyup = function(event){
								if(event.keyCode!=13)return;
								var td;
								if(event==null){
									td=window.event.srcElement.parentNode;
								}else{
									td=event.target.parentNode;
								}
								td.innerHTML = getE("temp_input").value;
							}
						}
					}
					__mergeColumn[j] = __id;
					__mergeNum[j] = 1;
				}
			}else{
				getE(__mergeColumn[j]).setAttribute("rowSpan", (++__mergeNum[j]));
			}
		}
	}
}
//Table  
Column = function(config){
	//    
	this.isHidden = config&&(config.typeof("hidden")!="undefined")?config.hidden:false;
	//      
	this.isMerged = config&&(config.typeof("isMerged")!="undefined")?config.hidden:false;
	//    
	this.mergeConditions = config&&config.mergeConditions?config.mergeConditions:null;
	//      
	this.isModified = config&&(config.typeof("isModified")!="undefined")?config.hidden:false;
	
}

//        0  
MergeCondition = function(config){
	this.columnIndex = config&&config.columnIndex?config.columnIndex:null;
	this.conditionType = config&&config.conditionType?config.conditionType:"eq";
}

//**************************************************
//utils
function getE(id){
	return document.getElementById(id);
}

function getColStr(num){
	var cs = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
	if(num<cs.length){
		return cs[num];
	}
	return (getColNum(Math.floor(num/cs.length))+getColNum(num%cs.length));
}

function getColNum(str){
	var cs = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
	if(num<=cs.length){
		return cs[num-1];
	}
	return (getColNum(Math.floor(num/cs.length))+getColNum(num%cs.length));
}