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