查找 HTML 表中行的平均值

Question

我目前正在做一个项目，我需要在 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>

Answer 1

看看下面的解决方案。我已经通过他们自己的班级和 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>