ajax請求json文件的內容並顯示在表格中
使用vscode運行，下載了live servers插件其中總分跟平均分通過json獲取的數據計算
效果如下：
json文件：score.json
{
"data": [
{
"name": "小明",
"chinese": "88",
"math": "90",
"English": "85",
"PE": "92"
}, {
"name": "小花",
"chinese": "76",
"math": "83",
"English": "92",
"PE": "87"
}, {
"name": "圓圓",
"chinese": "80",
"math": "96",
"English": "77",
"PE": "90"
}, {
"name": "小虹",
"chinese": "82",
"math": "68",
"English": "80",
"PE": "85"
}, {
"name": "小方",
"chinese": "85",
"math": "78",
"English": "66",
"PE": "89"
}, {
"name": "小偉",
"chinese": "80",
"math": "91",
"English": "79",
"PE": "84"
}, {
"name": "糖糖",
"chinese": "88",
"math": "85",
"English": "80",
"PE": "86"
}, {
"name": "杉杉",
"chinese": "78",
"math": "75",
"English": "62",
"PE": "80"
}
]
}
樣式文件：
table{
border-collapse: collapse;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align:center;
}
table td{
width: 80px;
height: 30px;
border: 1px solid;
}
前端代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>渲染表格</title>
<link rel="stylesheet" href="../css/test01.css" type="text/css" />
</head>
<body>
<table id="table1">
<tr>
<td>姓名</td>
<td>語文</td>
<td>數學</td>
<td>外語</td>
<td>體育</td>
<td>總分</td>
</tr>
</table>
<script src="../js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
function ones() {
// 請求獲取數據
$.ajax({
url: "../data/score.json",
type: "GET",
dataType: "json",
success: function (result) { //成功操作
res = result.data;
console.log(res);
var tab = $("#table1")[0];
tab = tab.childNodes[1]; //tbody標籤
// console.log(tab)
for (var i = 0; i < res.length; i++) {
//循環添加
if (i < res.length - 1) { //前面接收數據
var tr = $("<tr>"); //創建tr標籤
var td1 = $("<td>"); //創建td標籤
td1.text(res[i].name);
var td2 = $("<td>"); //創建td標籤
td2.text(res[i].chinese);
var td3 = $("<td>"); //創建td標籤
td3.text(res[i].math);
var td4 = $("<td>"); //創建td標籤
td4.text(res[i].English);
var td5 = $("<td>"); //創建td標籤
td5.text(res[i].PE);
var td6 = $("<td>"); //創建td標籤
td6.text(parseInt(res[i].chinese) + parseInt(res[i].math) +
parseInt(res[i].English) + parseInt(res[i].PE));
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
tab.append(tr[0]);
} else { //最後一行的數據
var tr = $("<tr>"); //創建tr標籤
var td1 = $("<td>"); //創建td標籤
td1.html("平均分");
var td2 = $("<td>"); //創建td標籤
var t1 = 0;
var t2 = 0;
var t3 = 0;
var t4 = 0;
var t5 = 0;
var trs = $(tab).children("tr"); //獲取tr標籤
for (var i = 0; i < res.length - 1; i++) {
t1 = parseInt(t1) + parseInt(res[i].chinese);
t2 = parseInt(t2) + parseInt(res[i].math);
t3 = parseInt(t3) + parseInt(res[i].English);
t4 = parseInt(t4) + parseInt(res[i].PE);
var tds = trs[i + 1].childNodes;
//使用$(tds[5])將js對象變爲jq
t5 = parseInt(t5) + parseInt($(tds[5]).text());
// console.log(t5 );
}
// console.log($(tds[5]).text() );
td2.html((t1 / (res.length - 1)).toFixed(2));
var td3 = $("<td>"); //創建td標籤
td3.html((t2 / (res.length - 1)).toFixed(2));
var td4 = $("<td>"); //創建td標籤
td4.html((t3 / (res.length - 1)).toFixed(2));
var td5 = $("<td>"); //創建td標籤
td5.html((t4 / (res.length - 1)).toFixed(2));
var td6 = $("<td>"); //創建td標籤
td6.html((t5 / (res.length - 1)).toFixed(2));
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
tab.append(tr[0]);
}
}
},
error: function () {
console.log("請求失敗！！")
}
});
};
ones();
})
</script>
</body>
</html>