今天寫了一天，寫懵逼了......

先這樣吧....

表格如下：

干了啥：

用json做了一個數據字典，存儲表格的名目(就是姓名、性別等等的這些名稱)

然后用jquery將這個字典里的值拿出來，用拼字符串的方法將表格渲染出來后插入tbody中。

json格式如下：

[    {"cname":"姓名","ename":"fullName","cols":"","rows":"","contentType":"0","editType":"0"},    {"cname":"照片預覽","ename":"","cols":"","rows":"5","contentType":"1","editType":"3"},    {"cname":"曾用名","ename":"aliasName","cols":"","rows":"","contentType":"0","editType":"0"},    {"cname":"性別","ename":"genderName","cols":"","rows":"","contentType":"0","editType":"0"},    {"cname":"教職工號","ename":"employeeCode","cols":"","rows":"","contentType":"0","editType":"0"},    {"cname":"國籍/地區","ename":"nationality","cols":"","rows":"","contentType":"0","editType":"0"},    {"cname":"身份證件類型","ename":"idCardTypeName","cols":"","rows":"","contentType":"0","editType":"0"},    {"cname":"身份證件號","ename":"idCardNo","cols":"","rows":"","contentType":"0","editType":"0"}]
好處：
實現方法肯定是比直接在html里面寫這個表格要費事兒一點兒，
但是當這個表格被應用于多個地方而且表格名目條數過多的時候，
如果要大量修改的話，其實是一件非常糟心的事兒
考慮的比較少：
每行只放兩個條目、
每個條目只考慮橫向或縱向合并、
橫向合并時，
當處在1號位上時，則這行只放一個條目；
當處在2號位上時，則結束這一行，新增一個tr行，新增的tr行只放一個條目。
縱向合并時，
則記錄需要縱向合并的行數。
啊，代碼如下......
第一次寫這種東西.....肯定是有很多需要優化的地方，先記錄一下：
var getLine = function(it,ins,type){		switch (type) {			case 1:				var tdline = '<td colspan="" rowspan="" class="t_name">'+it.cname+'</td>;'				tdline +=	'<td colspan="3" rowspan="" class="t_data data" name="'+it.ename+'"></td>';				break;			case 0:				var tdline = '<td colspan="'+it.cols+'" rowspan="'+it.rows+'" class="t_name">'+it.cname+'</td>;'				tdline +=	'<td colspan="'+it.cols+'" rowspan="'+it.rows+'" class="t_data data" name="'+it.ename+'"></td>';				break;			default:			  break;		}		if(ins == 2){tdline +=	"</tr>"};		return tdline;	};	var loadTpl = function(data){		var dataLen = data.length;		var tplStr = []; //模板		var rowCount = 0; //獲取縱向合并的數目		var lineStr; //一行tr的內容		var lineCount = 0;//一行的塊數計算		for(var i in data){			if(data[i].rows > 0){				rowCount = data[i].rows;			}			if(lineCount == 0){lineStr = "<tr>";}			if(rowCount > 0 || data[i].cols > 0){				if(rowCount > 0){					--rowCount;					lineStr += getLine(data[i],2,0);					tplStr.push(lineStr);					lineStr = "";					lineCount = 0;				}				if(data[i].cols > 0){					if(lineCount == 0){						lineStr += getLine(data[i],2,1);						tplStr.push(lineStr);						lineStr = "";						lineCount = 0;					}else{						lineStr += "</tr><tr>";						lineStr += getLine(data[i],2,1);						tplStr.push(lineStr);						lineStr = "";						lineCount = 0;					}				}			}else{				switch (lineCount) {					case 0:						lineStr += getLine(data[i],1,0);						lineCount++;						if(dataLen-1 == i){							lineStr += "</tr>";							tplStr.push(lineStr);							lineStr = "";							lineCount = 0;						}						break;					case 1:						lineStr += getLine(data[i],2,0);						tplStr.push(lineStr);						lineStr = "";						lineCount = 0;						break;					default:						break;				}			}		};		dom.find(".fragment-content table tbody").html(tplStr);	};
寫了三次......每次寫的都不對......
結果下班前的半個小時，一次性搞定了......
狀態不對真可怕......
***********************************************2月8日分割線******************************************************
昨晚給我老大瞄了一眼代碼，拼字符串被罵了。
會阻礙js的運行速度，要改用push。
待會兒去百度一下。
出了一個問題....
var loadTpl = function(data){		var tplStr ;		$.getJSON("../js/teacherInfoTpl.json",function(data){			tplStr = archivesSet.dataRender(data); //模板		});		dom.find(".fragment-content table tbody").html(tplStr);	};這里對tplStr的賦值出了getJSON這個方法居然取不到值。
var loadTpl = function(data){		var tplStr ;		$.getJSON("../js/teacherInfoTpl.json",function(data){			tplStr = archivesSet.dataRender(data); //模板			dom.find(".fragment-content table tbody").html(tplStr);		});	};
只有在getJSON內部才能去將tplStr html進tbody里
...百度了一下.....原來是getJSON方法和console.log異步執行的問題......
百度結果戳這里
問題解答是這樣的：
因為getJson是異步執行的，即console.log和getJson是一塊執行的，并沒有getJson執行完再執行console.log，所以全局變量并沒有賦值就輸出了解決辦法：在getJson前面加一句$.AjaxSettings.async = false;
所以改成下面這樣，加一行代碼就可以了
var loadTpl = function(data){		var tplStr;		$.ajaxSettings.async = false;		$.getJSON("../js/teacherInfoTpl.json",function(data){			tplStr = archivesSet.dataRender(data); //模板		});		dom.find(".fragment-content table tbody").html(tplStr);	};