需要以表格形式存储JSON数据并将其存储在指定格式的文本字段中

时间:2014-06-26 05:31:20

标签: javascript

我必须创建一个表格形式的数据,我从JSON格式的字段中获取它。当我编写下面的代码时,代码在Mozilla中正常工作,但在IE中显示错误。我需要在Textfield中存储该值。请帮忙。

suva.js

var data =[
{
    "ID" : "1",
    "Name" : "sh",
    "Workphone" : "0804568944",
    "Department" : "1",
    "Location" : "dfd",
    "Pickup" : "1"
},
{
    "ID" : "2",
    "Name" : "sdfg",
    "Workphone" : "0804562255",
    "Department" : "ss",
    "Location" : "2",
    "Pickup" : "2"
},
{
    "ID" : "2",
    "Name" : "sdfg",
    "Workphone" : "0804562255",
    "Department" : "ss",
    "Location" : "2",
    "Pickup" : "2"
},
{
    "ID" : "2",
    "Name" : "sdfg",
    "Workphone" : "0804562255",
    "Department" : "ss",
    "Location" : "2",
    "Pickup" : "2"
},
{
    "ID" : "2",
    "Name" : "sdfg",
    "Workphone" : "0804562255",
    "Department" : "ss",
    "Location" : "2",
    "Pickup" : "2"
},
{
    "ID" : "2",
    "Name" : "sdfg",
    "Workphone" : "0804562255",
    "Department" : "ss",
    "Location" : "2",
    "Pickup" : "2"
}];

function getTemplateData(){

var tbl = document.createElement("table");

//Header
var hdr = document.createElement("tr");

for(var lbl in data[0])
{
    var th = document.createElement("th");
    th.innerHTML = lbl;
    th.style.textDecoration = "underline";
    hdr.appendChild(th);
}


tbl.appendChild(hdr);
document.body.appendChild(tbl);

//For each records
for(var rec in data)
{
    var tr = document.createElement("TR");
    for(var prop in data[rec])
    {
        var td = document.createElement("td");
        td.innerHTML = data[rec][prop];
        tr.appendChild(td);
    }

    tbl.appendChild(tr);
}

var htmlStr = document.body.innerHTML;
alert(htmlStr);
return htmlStr;
 }

suva.html

<html>
    <head>
        <script type="text/javascript" src="suva.js"></script>
    </head>
    <body onload="getTemplateData()">
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

function getTemplateData(){
var content = '<table class="form-table"><tr><th>ID</th>';
content += '<th>Name</th>';
content += '<th>Workphone</th>';
content += '<th>Department</th>';
content += '<th>Location</th>';
content += '<th>Pickup</th>';
content += '</tr>';
document.body.innerHTML = content;
for (var i = 0;i<data.length;i++)
    {
    $('.form-table tr:last').after('<tr><td>'+data[i].ID+'</td><td>'+data[i].name+'</td> <td>'+data[i].Workphone+'</td><td>'+data[i].Department+'</td><td>'+data[i].Location+'</td><td>'+data[i].Pickup+'</td><tr>');
    }

}