-3

このように、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>
4

1 に答える 1

0

いくつかのコラムのタイトルがありませんか? しかし、あなたが求めていることを理解すれば、これはうまくいくはずです? 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/

于 2013-05-09T14:57:44.280 に答える