JavaScript中的Html动态表

Html dynamic table in JavaScript

本文关键字：动态 Html 中的 JavaScript      更新时间：2023-09-26

我正在创建一个小系统(供个人使用)，以分析一些学校的成绩。在一个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.....]的数据

在视图上显示。

您可以使用一些库来完成此操作。

E。G下划线

看jsfiddle 

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;
相关文章：