js循环json输出，jquery循环json输出，动态从json导入表格_json循环获取某些值并生成新的json数据-优快云博客

本文链接：https://blog.youkuaiyun.com/cocoaxian/article/details/52414805

页面

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
var areadata = {
province: [],
city: [],
district: []
}

function initAreaData() {
var dataroot = "file/readTest.json";
$.getJSON(dataroot, function(data) {
areadata.province = data.province;
areadata.city = data.city;
areadata.district = data.district;
alert(data.province);

// 普通for循环
for(var i = 0; i < data.province.length; i++) {
alert(data.province[i].name);
};

// jquery的each循环
$.each(data.province, function() {
alert(this.name);
});

// while循环
var i = 0;
while(data.province.length > i) {
alert(data.province[i].name);
++i;
}
});
};
</script>
</head>

<body>
<input type="button" id="_1301471656903021_panel" value="打印" οnclick="initAreaData();" />
</body>

</html>

json数据

{
"province": [
{
"name": "安徽省",
"code": "340000"
}, {
"name": "北京市",
"code": "110000"
}
],
"city": [
{
"name": "安庆市",
"code": "340800"
}, {
"name": "蚌埠市",
"code": "340300"
}
],
"district": [
{
"name": "埇桥区",
"code": "341302"
}, {
"name": "浉河区",
"code": "411502"
}
]
}

填充表格数据

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<table border=" cellspacing=" " cellpadding=" ">
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody id="thedata">
<tr>
<th>手机</th>
<th>2013-09-12</th>
<th>快递中</th>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">

var dataroot = "file/tabledata.json";
$.getJSON(dataroot, function(data) {

// jquery的each循环
$.each(data, function() {
var thedata = $("#thedata");
var trData = "<tr><th>"+ this.name +"</th><th>"+ this.date +"</th><th>"+ this.stuae +"</th></tr>";
//alert(trData);
thedata.append(trData);
});
});
</script>
</html>