Нахождение среднего числа строк в таблице 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

Посмотрите решение ниже.Я опознал каждого ученика по его классу и идентификатору.При изменении ввода я получаю класс ввода и затем проверяю каждое из входных значений, соответствующих одному и тому же классу.Я суммирую эти значения и делю их на количество введенных значений.

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>