根据输入list来初始化table（js实现）

通过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>'; 
}

接下来去后台获取数据，返回的是一个syslog系统日志对象的list，表格的模板里面要显示的就是syslog的对象的某些属性。姓名，修改时间，执行的动作，备注。

拿到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初始化表格最核心的代码就是 initTableByList

/**
 * 根据输入数组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方法可以实现如图的效果，当然样式可以自己随意添加