一、不显示表头，采用了2种方式，其中的差别大家自己分辨吧。
1、方式一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<style>
table{
border-collapse:collapse;
border: 1px solid #000000;
width:80%;
}
td{
border-collapse:collapse;
border: 1px solid #000000;
line-height:30px;
}
</style>
</head>
<body>
<div id="createtable"></div>
<script>
$(function(){
$.ajax({
type: "get",
url: "db.json",
dataType: "json",
success: function(res) {
var list = res.airdata;
var table=$("<table>");
table.appendTo($("#createtable"));
for(var i = 0; i < list.length; i++) {
var tr=$("<tr></tr>");
tr.appendTo(table);
var td=$("<td>"+list[i].id+"</td><td>" + list[i].city + "</td><td>" + list[i].airport + "</td>");
td.appendTo(tr);
}
}
});
$("#createtable").append("</table>");
});
</script>
</body>
</html>
2、方式二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<style>
table{
border-collapse:collapse;
border: 1px solid #000000;
width:80%;
}
td{
border-collapse:collapse;
border: 1px solid #000000;
line-height:30px;
}
</style>
</head>
<body>
<div id="createtable"></div>
<script>
$(function(){
$.ajax({
type: "get",
url: "db.json",
dataType: "json",
success: function(res) {
var list = res.airdata;
console.log(list);
var table=$("<table>");
table.appendTo($("#createtable"));
for(var i = 0; i < list.length; i++) {
var tr=$("<tr></tr>");
tr.appendTo(table);
for(var key in list[i]){
var td=$("<td>"+list[i][key]+"</td>");
td.appendTo(tr);
};
};
}
});
$("#createtable").append("</table>");
});
</script>
</body>
</html>
二、显示表头
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<style>
table{
border-collapse:collapse;
border: 1px solid #000000;
width:80%;
}
td{
border-collapse:collapse;
border: 1px solid #000000;
line-height:30px;
}
</style>
</head>
<body>
<div id="createtable">
<table border="1" cellspacing="0" bordercolor="#4bade8" cellpadding="0" id="jsonList">
<tr>
<th>编号</th>
<th>城市</th>
<th>机场</th>
</tr>
</table>
</div>
<script>
$(function(){
var temp ='';
$.ajax({
type: "get",
url: "db.json",
dataType: "json",
success: function(res) {
var list = res.airdata;
for(var i = 0; i < list.length; i++) {
temp +=
'<tr>' +
'<td>' + list[i].id + '</td>' +
'<td>' + list[i].city + '</td>' +
'<td>' + list[i].airport + '</td>' +
'</tr>';
}
$("#jsonList tr:not(:first)").html("");
$("#jsonList").append(temp);
}
});
});
</script>
</body>
</html>
返回列表
电话
地址
