使用javascript将json数据以table的形式显示在页面上

简介

经常会遇到在页面上接收json数据，并以表格的形式显示在页面上，如果不引入jquery库，很多人的做法是采用

eval('('+json+')')

的方法来做将json字符串转化为object的。

但是eval是魔鬼，并不建议使用eval方法，而是采用立即执行函数的方法。

var string = '[{name:"xyy",sex:"girl"},{name:"lz",sex:"boy"}]', 
jsonData = new Function("return "+ string)(),
//使用new Function()的方式新建一个function，
//同时后面加上括号立即执行该function,得到json对象组
i,
jsonLength = jsonData.length,
temp,
tbl,
tr,
td,
body;

tbl = document.createElement("table");
tbl.border="1px";
tbl.borderColor="red";
for(i=0;i<jsonLength;i++){
	tr = document.createElement("tr");
	for(temp in jsonData[i]){
		td = document.createElement("td");
		td.appendChild(document.createTextNode(jsonData[i][temp]));
		tr.appendChild(td);
	}
	tbl.appendChild(tr);
}
body = document.getElementsByTagName("body");
body[0].appendChild(tbl);

以上方法使用了单var模式