<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="json.js"></script>
</head>
<body>
<div style="text-align: left">
<script type="text/javascript" language="JavaScript">
var baseArray = new Array();
baseArray[0] = { 'id': '1', cnt: [{ 'id': 1, 'name': 'n1', 'age': '20' }, { 'id': 4, 'name': 'n4', 'age': '24'}] };
baseArray[1] = { 'id': '2', cnt: [{ 'id': 2, 'name': 'n2', 'age': '21' }, { 'id': 5, 'name': 'n5', 'age': '21'}] };
baseArray[2] = { 'id': '3', cnt: [{ 'id': 3, 'name': 'n3', 'age': '23' }, { 'id': 6, 'name': 'n6', 'age': '22'}] };
//baseArray[3] = "{ 'id': '4', 'cnt': [{ 'id': 7, 'name': 'n7', 'age': '21'}, { 'id': 8, 'name': 'n8', 'age': '25'}] }";//不是標準Json格式，轉換時不識別
baseArray[3] = '{ "id": "4", "cnt": [{ "id": 7, "name": "n7", "age": "21"}, { "id": 8, "name": "n8", "age": "25"}] }';
//轉換爲Json對象
JSON.TryParse = function (tar) {
if (typeof (tar) === 'string') {
return JSON.parse(tar);
} else {
return tar;
}
};
function showJson() {
for (var i = 0; i < baseArray.length; i++) {
var group = JSON.TryParse(baseArray[i]); //轉換爲Json對象
var groupID = group.id;
for (var j = 0; j < group.cnt.length; j++) {
var id = group.cnt[j].id;
var name = group.cnt[j].name;
var age = group.cnt[j].age + '歲';
//新增加一行
var appendstr = "<tr>";
appendstr += "<td>" + id + "</td>";
appendstr += "<td>" + name + "</td>";
appendstr += "<td>" + age + "</td>";
appendstr += "<td>" + groupID + "</td>";
appendstr += "</tr>";
$("#Table").append(appendstr);
}
}
}
</script>
<input type="button" value="json" οnclick="showJson();">
<br>
<table id="Table" border="1" cellpadding="10" cellspacing="1" bordercolor="#FFAA00">
<caption style="font-size: 15px">
學生表<label id="tableRowCount"></label></caption>
<th>
id
</th>
<th>
Name
</th>
<th>
Age
</th>
<th>
group
</th>
</table>
</div>
</body>
</html>