如何使用json解析的数据在html表中显示

问题描述：

like so如何使用json解析的数据在html表中显示。使用解析数据中的html在每行中显示数据。如何使用json解析的数据在html表中显示

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function tjsonparse() 
{ 
var i=0; 
var j=0; 
alert('1'); 
var obj = JSON.parse('{"employeelist":  [{"name":"John","age":"40","gender":"male", 
"employment": 
    [{"company":"tml","tenure":"2"}, 
    {"company":"sys","tenure":"4"}, {"company":"rew","tenure":"5"}]}, 
{"name":"John2","age":"402","gender":"male2", 
    "employment":[{"company":"tml2","tenure":"22"}, 
{"company":"sys2","tenure":"42"}, {"company":"rew2","tenure":"52"}]}]}'); 
alert('2'); 

    while(i<obj.employeelist.length) 
    { 
    alert(obj.employeelist[i].name); 
document.getElementById("name").innerHTML=obj.employeelist[i].name; 
alert(obj.employeelist[i].age); 
document.getElementById("age").innerHTML=obj.employeelist[i].age; 
alert(obj.employeelist[i].gender); 
document.getElementById("gender").innerHTML=obj.employeelist[i].gender; 

j=0; 
while(j<obj.employeelist[i].employment.length) 
{ 
alert(obj.employeelist[i].employment[j].company); 
document.getElementById("company").innerHTML=obj.employeelist[i].employment[j].company; 
alert(obj.employeelist[i].employment[j].tenure); 
document.getElementById("tenure").innerHTML=obj.employeelist[i].employment[j].tenure; 
j++; 
} 
i++; 
} 
} 
</script> 
</head> 
<body> 
<table border="1", cellspacing="2", cellpadding="20"> 
<tr> 
<th>Name: </th> 
<th>Age: </th> 
<th>Gender: </th> 
<th>Company: </th> 
<th>Tenure: </th> 
</tr> 
<tr> 
<td><span id="name"></span></td> 
<td><span id="age"></span></td> 
<td><span id="gender"></span></td> 
<td><span id="company"></span></td> 
<td><span id="tenure"></span></td> 
</tr> 
<tr> 
<td><span id="name"></span></td> 
<td><span id="age"></span></td> 
<td><span id="gender"></span></td> 
<td><span id="company"></span> 
<td><span id="tenure"></span></td> 
</tr> 
<tr> 
<td><span id="name"></span></td> 
<td><span id="age"></span></td> 
<td><span id="gender"></span></td> 
<td><span id="company"></span></td> 
<td><span id="tenure"></span></td> 
</tr> 
<tr> <td><span id="name"></span></td>  
<td><span id="age"></span></td> 
<td><span id="gender"></span></td> 
<td><span id="company"></span></td> 
<td><span id="tenure"></span></td> 
</tr> 
<tr> 
<td><span id="name"></span></td> 
<td><span id="age"></span></td> 
<td><span id="gender"></span></td> 
<td><span id="company"></span></td> 
<td><span id="tenure"></span></td> 
</tr> 
<tr> 
<td><span id="name"></span></td> 
<td><span id="age"></span></td> 
<td><span id="gender"></span></td> 
<td><span id="company"></span></td> 
<td><span id="tenure"></span></td> 
</tr> 
</table> 
<button value="Submit" onclick="tjsonparse();">testjson</button> 
</body> 
</html>

答

你错过了几个列标题？但是，如果我明白你在做什么，这应该工作？ http://jsfiddle.net/NgEMh/1/

<div id="table"></div> 

<script> 

var i=0; 
var j=0; 
var table = " <table border=\"1\", cellspacing=\"2\", cellpadding=\"20\"> "+ 
"<tr>" + 
"<th>Name: </th>" + 
"<th>Age: </th>" + 
    "<th>Gender: </th>" + 
"<th>Company: </th>" + 
"<th>Tenure: </th>" + 
"</tr>"; 

var obj = JSON.parse('{"employeelist":  [{"name":"John","age":"40","gender":"male","employment": [{"company":"tml","tenure":"2"}, {"company":"sys","tenure":"4"}, {"company":"rew","tenure":"5"}]}, {"name":"John2","age":"402","gender":"male2", "employment":[{"company":"tml2","tenure":"22"}, {"company":"sys2","tenure":"42"}, {"company":"rew2","tenure":"52"}]}]}'); 

while(i<obj.employeelist.length) 
{ 
table += "<tr><td>"+obj.employeelist[i].name+"</td><td>"+obj.employeelist[i].age+"</td><td>"+obj.employeelist[i].gender+"</td>"; 
//alert(obj.employeelist[i].name); 
//document.getElementById("name").innerHTML=obj.employeelist[i].name; 
//alert(obj.employeelist[i].age); 
//document.getElementById("age").innerHTML=obj.employeelist[i].age; 
//alert(obj.employeelist[i].gender); 
//document.getElementById("gender").innerHTML=obj.employeelist[i].gender; 

j=0; 
while(j<obj.employeelist[i].employment.length) 
{ 
    table += "<td>"+obj.employeelist[i].employment[j].company+"</td><td>"+obj.employeelist[i].employment[j].tenure+"</td>"; 
    //alert(obj.employeelist[i].employment[j].company); 
    //document.getElementById("company").innerHTML=obj.employeelist[i].employment[j].company; 
    //alert(obj.employeelist[i].employment[j].tenure); 
    //document.getElementById("tenure").innerHTML=obj.employeelist[i].employment[j].tenure; 
    j++; 
} 
table += "</tr>"; 
i++; 
} 
document.getElementById("table").innerHTML=table; 
</script>

或者你可以使用jQuery使用以.json和方法。每次通过每个行迭代解析JSON。 http://api.jquery.com/jQuery.each/http://api.jquery.com/jQuery.parseJSON/

是的，谢谢man..ihad错过了列名..ie。公司，任期......再次感谢 – 2013-05-10 13:19:28

如何使用json解析的数据在html表中显示

相关推荐