通過js動態生成表格並初始化，最近正好做了一個點選按鈕彈出日誌表格的功能，獻上一個例子給大家。

首先是動態生成表頭

function createDivHtml(){
	if($('#logTable').length == 0){
		var aHtml="<table cellSpacing=1 cellPadding=1 width='100%' class='basictable' id='logTable'>";																	
		aHtml += "<tr><th nowrap='nowrap' width='15%' align='center'>操作員工</th>";
		aHtml += "<th nowrap='nowrap' width='25%' align='center'>操作時間</th>";
		aHtml += "<th nowrap='nowrap' width='15%' align='center'>操作</th>";
		aHtml += "<th width='45%' align='center'><div id='logComm'>備註</div></th></tr></table>";
		$("#divLogListShow").append(aHtml);
	}
}
 

function logTrHtml(){
	return '<tr>'
		+'<td align="center" id="item_<n>-employee-empName"></td>'
		+'<td align="center" id="item_<n>-slChangeTime"></td>'
		+'<td align="center" id="item_<n>-slAction"></td>'
		+'<td align="center" id="item_<n>-slComments"></td>'
		+'</tr>'; 
}
 

拿到list後接下來是回撥函式

function(syslogList){	
	var tableId="logTable"; //表格id
	if(model.simple.getObjectType(syslogList)=="Array" && syslogList.length>0){
	model.simple.initTableByList(tableId,"item",syslogList,logTrHtml()); 
	var trNum = $("#logTable").find("tr:gt(0)").length;
	for(var a=0;a<trNum;a++){
		var mes = $('#item_'+a+'-slComments').html().replace(/\n/g,'<br>');
		$('#item_'+a+'-slComments').html(mes);
	}
	}else{
		var table=$("#"+tableId);
		table.find("tr:gt(0)").remove(); //移除標題以外的行
	<span style="white-space:pre">	</span>table.append('<tr><td align="center" colspan="4">沒有此條記錄相關資訊</td></tr>');
	}
			
	$('#divLogListShow').show();
}
 

/**
 * 根據輸入陣列list來初始化某個table
 * @param tableId: table id
 * @param listNamePrefix 子元素id字首
 * @param list 匯入的資料物件
 * param trHtml 每個tr的模板內容
 */
model.simple.initTableByList = function (tableId,listNamePrefix,list,trHtml){
	if(!list.length){
		return;
	}
	var regS = new RegExp(model.simple.indexReg,"gi");
	var table=$("#"+tableId);
	//移除標題以外的行
	table.find("tr:gt(0)").remove();
	//設定初始html
	var tableHtml="";
	for(var i=0;i<list.length;i++){
		tableHtml+=trHtml.replace(regS,i);
	}
	table.append(tableHtml);
	//設定初始值
	model.simple.initByList(tableId,listNamePrefix,list);
}

/**
 * 根據輸入陣列list來初始化某個globalId下屬的子元素值（listNamePrefix字首）。
 * @param globalId: html裡面某個頭元素id，如某個formId，或者某個tableId。
 * @param listNamePrefix 子元素id字首
 * @param list 匯入的資料物件
 */
model.simple.initByList = function (globalId,listNamePrefix,list){
	var regS = new RegExp(model.simple.fieldSeperator,"gi");
	var elementsAll=$("#"+globalId+" [id^='"+listNamePrefix+model.simple.listIndexSeperator+"']");
	for(var i=0;i<elementsAll.size();i++){
		var ele=elementsAll.get(i);
		var fieldName=ele.id.substring(listNamePrefix.length+1);
		var num=fieldName.substring(0,fieldName.indexOf(model.simple.fieldSeperator));
		fieldName=fieldName.substring(num.length+1);
		fieldName=fieldName.replace(regS,".");
		var value=eval("list["+num+"]."+fieldName);
		if(value==null){
			value="";
		}
		if(ele.tagName=="SELECT"){
			valueMap=eval("list["+num+"]."+fieldName+"Map");
			if(valueMap){
				DWRUtil.removeAllOptions(ele.id);
				DWRUtil.addOptions(ele.id, valueMap, false);
			}
		}
		model.simple.setElementValue(ele,value);
	}
}

/**
 * 設定元素的值，如果是div之類的則設定裡面的html
 */
model.simple.setElementValue = function (idOrElement,value){
	var ele = model.simple.getElement(idOrElement);
	if(ele==null){
		//alert("type of idOrElement is wrong: model.simple.getElementValue");
		return;
	}
	if(ele.tagName == "INPUT" || ele.tagName == "TEXTAREA"){
		if(ele.type == "checkbox"){
			if(value && value!=null){
				ele.checked=true;
			}else{
				ele.checked=false;
			}
		}else{
			ele.value=value;
		}
	}else if(ele.tagName=="SELECT"){
		if(ele.type == "select-one" && value !=null && (value || value===0)){
			ele.value=value;
		}
	}else if(ele.tagName=="IMG"){
		ele.src=value;
	} else{
		ele.innerHTML=value;
	}
}

通過這樣的js方法可以實現如圖的效果，當然樣式可以自己隨意新增