使用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模式