一个表格渲染函数

工作上遇到了很多根据ajax返回的数据进行表格渲染的场景，不想写一堆html+=''+.........
于是自己写了个函数解决这个问题。

//三个参数分别是数据源，数据格式和将要append的table或者tbody的id
function billyTableRender(dataSource,dataForm,elementID) {
	var tableNode = document.getElementById(elementID)
	//清空table
	tableNode.innerHTML=""
	var tempTable, tempTr,tempTd,tempAttr
	for (var i=0;i<dataSource.length;i++){
		tempTr = document.createElement('tr')
		for(var k=0;k<dataForm.length;k++){
			//如果是string，代表仅仅是对字段而已
			if(typeof dataForm[k]=='string'){
				tempTd = document.createElement('td')
				tempTd.innerHTML=dataSource[i][dataForm[k]]
				tempTr.appendChild(tempTd)
			//如果是对象的话，则需要详细的动态添加元素
			}else{
				tempTd = document.createElement('td')
				tempObj = document.createElement(dataForm[k]['tag'])
				for(var j in dataForm[k]){
					if(j == "tag"){
						
					}else if(j == "innerHTML"){
						//给td定义innerHTML
						tempObj.innerHTML=dataSource[i][dataForm[k][j]]
					}else if(j == 'innerText'){
						//给td定义innerText
						tempObj.innerText=dataSource[i][dataForm[k][j]]
					}else if(j != "tag" && j != "innerText" && j != "innerHTML" && j != "selfDefined"&&j != "style"){
						//根据dataForm元素中对象里的值所对应的dataSource里的字段来为新创建的DOM对象赋以属性
						tempObj.setAttribute(j,dataSource[i][dataForm[k][j]])
					}else if(j == "selfDefined"){
						//如果写在selfDefined里面，就直接根据dataForm里的值来定义属性 
						tempAttr=dataForm[k][j]
						for (var l in tempAttr){
							tempObj.setAttribute(l,tempAttr[l])
						}
					}else if(j == "style"){
						//如果写在style里面，则为DOM对象定义style属性，也是根据value从dataSource里索引出来的
						tempAttr=dataForm[k][j]
						for (var l in tempAttr){
							tempObj.style[l]=dataSource[i][tempAttr[l]]
						}
					}
				}
				tempTd.appendChild(tempObj)
				tempTr.appendChild(tempTd)
			}
		}
		tableNode.appendChild(tempTr)
	}
}

billyTableRender的三个参数分别是数据源，格式，表格ID

第一个参数

为一个数组，每个元素可以理解为表格中的一行所使用的信息源（有时也会包括样式或a标签的src等信息）

第二个参数

为一个数组，每个元素可以理解对应一个td。 
如果为字符串则对应数据源中的对应字段，
如果为对象则：
    对应tag为内部所包含的元素标签种类， 
    对应innerText和innerHTML为其包含的节点内部字符和节点内部html， 
    对应selfDefined为其元素内部对应的自定义元素，其属性值直接从该参数内部获取， 
    对应style为其元素所对应的样式信息，由该参数所对应的value值从数据源中索引而出 ，
    其它则为td中的dom元素动态添加的属性，由该参数所对应的value值从数据源中索引而出

===========
附github地址：https://github.com/kianyin/billyTableRender