[英]Html dynamic table in JavaScript
我正在創建一個小系統(供個人使用)以分析一些學校成績。 在 Html 頁面( index.html )中,我想插入一個 JavaScript 腳本,該腳本計算同一主題的mydata.js值的平均值,並將它們放入index.html頁面中的表格中。
mydata.js看起來像這樣:
myData([
{"subject": 1, "value": 5},
{"subject": 2, "value": 4},
{"subject": 3, "value": 7},
{"subject": 1, "value": 5},
{"subject": 2, "value": 7},
{"subject": 3, "value": 6},
{"subject": 2, "value": 3}
]);
index.html看起來像這樣:
<html>
<head>
<title>index</title>
</head>
<body>
<table>
<tr>
<td>SUBJECT: 1</td>
<td>AVERAGE: x</td> <!-- Instead of x should be 5 -->
</tr>
<tr>
<td>SUBJECT: 2</td>
<td>AVERAGE: y</td> <!-- Instead of y should be 4.6 -->
</tr>
<tr>
<td>SUBJECT: 3</td>
<td>AVERAGE: z</td> <!-- Instead of z should be 6.5 -->
</tr>
</table>
<script src="path/mydata.js"></script>
</body>
</html>
非常感謝!
下面給出的是我使用過的 JS 的相關部分
for (var i = 0; i < myData.length; i++) {
if (myData[i].subject == '1') {
avg1 = avg1 + myData[i].value;
count1++;
} else if (myData[i].subject == '2') {
avg2 = avg2 + myData[i].value;
count2++;
} else if (myData[i].subject == '3') {
avg3 = avg3 + myData[i].value;
count3++;
}
}
document.getElementById('avg_sub1').innerHTML = avg1 / count1;
document.getElementById('avg_sub2').innerHTML = avg2 / count2;
document.getElementById('avg_sub3').innerHTML = avg3 / count3;
這是一個簡單的偽解決方案。
<script>
var data = [
{ "subject": 1, "value": 5 },
{ "subject": 2, "value": 4 },
{ "subject": 3, "value": 7 },
{ "subject": 1, "value": 5 },
{ "subject": 2, "value": 7 },
{ "subject": 3, "value": 6 },
{ "subject": 2, "value": 3 }
];
var averageArray = [];
for (var i = 0 ; i < data.length ; i++) {
var average = data[i].value;
for (var j = 0 ; j < data.length; j++) {
if (data[i].subject == data[j].subject) {
average = (average + data[j].value) / 2;
}
}
averageArray.push(average);
}
</script>
現在,您averageArray
都會有數據,如[5,4.6,6.5.....]
使用它來顯示在您的視圖中。
你可以使用一些庫來做到這一點。
例如下划線
var myData =[
{"subject": "mmm", "value": 5},
{"subject": "bbb", "value": 4},
{"subject": "ccc", "value": 7},
{"subject": "mmm", "value": 5},
{"subject": "bbb", "value": 7},
{"subject": "ccc", "value": 6},
{"subject": "bbb", "value": 3}
];
var tr = '';
var subjects = _.groupBy(myData, "subject");
for (var sub in subjects) {
var s = _.pluck(subjects[sub], 'value');
var avg = _.reduce(s, function(a, b) {
return a + b;
}, 0) / (s.length === 0 ? 1 : s.length);
tr += '<tr><td>'+sub+'</td><td>'+avg+'</td></tr>';
}
document.getElementById("t").innerHTML = tr;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.