Как рассчитать общее среднее значение по студентам, используя Javascript

Question

Надеюсь, моего заголовка достаточно, чтобы понять мой вопрос, я уже несколько раз публиковал этот вопрос, но надеюсь, на этот раз я получу от вас помощь, ребята.

<table  id="blacklistgrid" border="2px">
     <tr>
        th id="th">Students Name</th>
     </tr>
     {% for student in teacherStudents %}
     <tr class="tr2">
        <td id="td">{{ student.Students_Enrollment_Records.Student_Users }}</td>
     </tr>
     {% endfor %}
</tr>
    </table>
<button type="button" value="" class="save" onclick="doTheInsert()" title="Insert New Cell" id="save">&plus;&nbsp;Insert New Cell</button>

    <button type="button" value="" class="save" onclick="undoTheInsert()" title="Undo Recent Action" id="unsave">&times;&nbsp;Undo Recent Action</button>

<button type="button" value="" class="save" onclick="compute()" title="Undo Recent Action" id="compute">Compute</button>

Это мой сценарий для кнопки Вставить Ячейка

<script>
    var counter = 0;
    function doTheInsert(){

        let header=$("tr#tr");  // same as $.find("tr[id='tr2']")
        $('#th').after("<th data-id='headers' id='header'><input type='date'></th>");
        let rows=$(".tr2");
        rows.append("<td data-id='row' ><input type='number' class='average'/></td>");
        counter++;
    }
    </script>

это мой текущий скрипт в вычислениях

<script>
function compute(){
  var sum = 0;
  var rows = document.getElementsByClassName("average");
  for(var i = 0; i < counter; i++){
   sum +=  parseInt(rows[i].value);
  }
  var average = sum / counter;
  document.getElementById("demo").innerHTML = average;
  let header=$("tr#tr");  // same as $.find("tr[id='tr2']")
    $('#thb').before("<th data-id='headers' id='headerss'>Average</th>");
    }
</script>

это результаты, которые я получаю,

вычисляется только среднее число первых учеников

это результат, который я хочу

, когда я попробовал этот запрос от г-на @Saket Yadav

<script>
function compute(){
  var sum = 0;
  var rows = document.getElementsByClassName("average");

   $(".average").each(function () {
   sum += parseInt($(this).val());
    });

  console.log("Sum:"+sum);
  var average = sum / counter;
  document.getElementById("demo").innerHTML = average;
  let header=$("tr#tr");  // same as $.find("tr[id='tr2']")
    $('#thb').before("<th data-id='headers' id='headerss'>Average</th>");
    }
</script>

я получил этот результат

это то, что я хочу в моем результате

Answer 1

Я бы сделал что-то вроде этого (с использованием реакции вместо jquery)

const App = () => {
  const [ students, setStudents ] = React.useState([{
    id: 0,
    name: 'Jonh',
    notes: [
      { date: '2020-01-02', note: 4 },
      { date: '2020-01-03', note: 12 }
    ]
  }]);
  
  const [ days, setDays ] = React.useState([
    '2020-01-02',
    '2020-01-03'
  ])
  
  const [ newStudentName, setNewStudentName ] = React.useState('Name')
  
  const getAverage = notes => {
    return notes.reduce((sum, { note }) =>  sum + parseInt(note), 0)/notes.length;
  }
  
  const addStudent = () => {
    setStudents([
      ...students, {
        id: +new Date(),
        name: newStudentName,
        notes: days.map(date => ({ date, note: null }))
      }
    ])
  }
  
  const setNote = (studentId, noteDate, newNote) => {
    const nextStudents = students.map(student => {
      if (student.id === studentId) {
        return {
          ...student,
          notes: student.notes.map(({ note, date }) => (
            date === noteDate ? { note: newNote, date } : { note, date }
          )) 
        }
      }
      return student;
    })
    setStudents(nextStudents)
  }
  
  return (
    <div>
    <table>
      <tr>
        <th>Name</th>
        {days.map(day => <th>{day}</th>)}
        <th>Average</th>
      </tr>
      {students.map(({ id: studentId, name, notes })=> (
        <tr>
          <td>
            {name}
          </td>
          {notes.map(({ date, note }) => <td><input type="number" onChange={({ target: { value }}) => setNote(studentId, date, value)} value={note} /></td>)}
          <td>{getAverage(notes)}</td>
        </tr>
      ))}
    </table>
    <input onChange={({target: { value }}) => setNewStudentName(value)} value={newStudentName} />
    <button onClick={() => addStudent()}>Add student</button>
    </div>
  ) 
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Пожалуйста, обновите вашу JavaScript вычислительную функцию, как показано ниже.

<script>
   function compute(){
        let header=$("tr#tr");  // same as $.find("tr[id='tr2']")
        $('th:last-child').after("<th data-id='headers' id='header'>Average</th>");
        let rows1=$(".tr2");
        rows1.append("<td data-id='row' ><input type='number' class='averages'/></td>");

        $('tr').each(function () {
            var sum = 0
            var i=0;
            $(this).find('.average').each(function () {
                var textVal = $(this).val();
                console.log(textVal);
                if (!isNaN(textVal) && textVal.length !== 0) {
                    sum += parseFloat(textVal);
                }
                i++;
            });
            var avg=sum/i;
            $('.averages', this).val(avg);
        });
        }
</script>