在HTML表格中查找行的平均值

时间:2019-02-28 00:10:44

标签: javascript html average

我目前正在一个项目中,我需要在HTML表中查找某些行的平均值,该值会在值更改时自动更新。我不知道从哪里开始,因为我们被分配了这项工作,只是被告知在没有任何先验知识的情况下学习HTML,CSS和JavaScript,因此,如果这个问题是基本的,抱歉。我需要将平均值放在包含它们彼此相邻的每一行上的位置。

<table id="gradeTable"> <!Table>
<thead>
<tr id="Header">
    <th>Student Name:</th>
    <th>Student Number:</th>
    <th>Assignment 1 %:</th>
    <th>Assignment 2 %:</th>
    <th>Assignment 3 %:</th>
    <th>Assignment 4 %:</th>
    <th>Assignment 5 %:</th>
    <th>Final Grade %:</th>
</tr>

</thead>
<tbody> 

<tr>
    <td id="Iden">Student A</td>
    <td id="Iden">172300</td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td id="Final"></td>
</tr>

<tr>
    <td id="Iden">Student B</td>
    <td id="Iden">172301</td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td id="Final"></td>
</tr>

<tr>
    <td id="Iden">Student C</td>
    <td id="Iden">172302</td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
    <td id="Final"></td>
</tr>
</tbody>
</table>

1 个答案:

答案 0 :(得分:0)

浏览以下解决方案。我已经根据每个学生的班级和ID来识别他们。在更改输入时,我得到了输入的类,然后遍历匹配相同类的每个输入值。我将这些值加起来,然后除以输入的输入值的数量。

function assignmentGrade(inp) {
  var student = inp.className;
  var studentScores = document.getElementsByClassName(student);
  var totalScore = 0;
  var numberScored = 0;
  var avg = 0;
  if (studentScores) {
    for (var x = 0; x < studentScores.length; x++) {
      if (!isNaN(studentScores[x].value) && studentScores[x].value != "") {
        totalScore = totalScore + parseInt(studentScores[x].value);
        numberScored++;
      }
    }
    //
    if (numberScored > 0) {
      avg = (totalScore / numberScored).toFixed(2);;
      document.getElementById(student).innerHTML = avg;
    }
  }
}
<table id="gradeTable">
  <!Table>
  <thead>
    <tr id="Header">
      <th>Student Name:</th>
      <th>Student Number:</th>
      <th>Assignment 1 %:</th>
      <th>Assignment 2 %:</th>
      <th>Assignment 3 %:</th>
      <th>Assignment 4 %:</th>
      <th>Assignment 5 %:</th>
      <th>Final Grade %:</th>
    </tr>

  </thead>
  <tbody>

    <tr>
      <td>Student A</td>
      <td id="IdenA">172300</td>
      <td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td id="A"></td>
    </tr>

    <tr>
      <td>Student B</td>
      <td id="IdenB">172301</td>
      <td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td id="B"></td>
    </tr>

    <tr>
      <td>Student C</td>
      <td id="IdenC">172302</td>
      <td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
      <td id="C"></td>
    </tr>
  </tbody>
</table>