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

【问题标题】：how to use json parsed data to be displayed in html table如何使用json解析后的数据显示在html表格中
【发布时间】：2013-05-04 01:27:54
【问题描述】：

like so 如何使用json解析后的数据显示在html表格中。使用解析数据中的 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>

【问题讨论】：

标签： javascript html json html-table

【解决方案1】：

您缺少几个列标题？但是，如果我了解您的需求，这应该可以吗？ 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 和 .each 方法遍历每一行。 http://api.jquery.com/jQuery.each/http://api.jquery.com/jQuery.parseJSON/

【讨论】：

是的，谢谢 man..ihad 错过了列名..ie。公司，任期...再次感谢