Суммируйте столбцы таблицы для каждого изменения в таблице с помощью Javascript

Question

У меня есть таблица, в которой данные таблицы берутся из формы.Я написал функцию javascript для суммирования столбцов Value1, Value2 Value3, которые находятся в tfoot.

<table id="table1" class="table table-hover table-responsive">
   <thead>
            <tr>

              <th scope="col">Name</th>
              <th scope="col">Value1</th>
              <th scope="col">Value2</th>
              <th scope="col">Value3</th>
              <th scope="col">Info</th>
              <th scope="col">Date</th>
              <th scope="col">Delete</th>

            </tr>
          </thead>

          <tbody id="tbody-list">


          <tr><td>Item1</td>
                    <td>1100</td>
                    <td>10</td>
                    <td>10</td>  
                    <td>Info</td> 
                    <td>2019-02-18</td> 
                    <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr>
<tr><td>Item2 </td>
                    <td>28.00 </td>
                    <td>0.87</td>
                    <td> 0.00 </td>  
                    <td>Info</td> 
                    <td>2019-02-18</td> 
                    <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr><tr><td>Item3 </td>
                    <td>28.00 </td>
                    <td>0.87</td>
                    <td> 0.00 </td>  
                    <td>Info</td> 
                    <td>2019-02-18</td> 
                    <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr><tr><td>Item4 </td>
                    <td>28.00 </td>
                    <td>0.87</td>
                    <td> 0.00 </td>  
                    <td>Info</td> 
                    <td>2019-02-18</td> 
                    <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr></tbody><tfoot>
            <tr><td class="h4">TOTAL Values</td>
            <td id="val1">NaN </td>
            <td id="val2">NaN</td>
            <td id="val3">NaN </td>
            <td></td>
            <td></td>
            <td></td>
          </tr></tfoot>


        </table>

Вот мой js

sumValues(){
    let val1 = parseFloat(document.getElementById('val1').innerHTML);
    let val2 = parseFloat(document.getElementById('val2').innerHTML);
    let val3 = parseFloat(document.getElementById('val3').innerHTML);

    const table = document.getElementById('tbody-list');


    for(let i = 0; i < table.rows.length; i++){
      console.log("works");
      val1 += parseFloat(table.rows[i].cells[1]).innerHTML;
      val2 += parseFloat(table.rows[i].cells[2]).innerHTML;
      val3 += parseFloat(table.rows[i].cells[3]).innerHTML;
    }

    document.getElementById('val1').innerHTML = `${val1}`;
    document.getElementById('val2').innerHTML = `${val2}`;
    document.getElementById('val3').innerHTML = `${val3}`;
}

, и это мой tfoot в html, я установил их0 что начальные значения для val1, val2, val3 также равны 0, тогда я могу суммировать по нему.

  <tfoot>
            <td class="h4">TOTAL Values</td>
            <td id="total-cal">0</td>
            <td id="total-car">0</td>
            <td id="total-fat">0</td>
            <td id="total-amount"></td>
            <td></td>
            <td></td>
          </tfoot>

Я не знаю, где ошибка, но я продолжаю получать NaN для общих значений?

Другой вопрос (который связан с этим вопросом). Это мой eventListener, поэтому каждый раз, когда в таблице появляется новый элемент, вызывается функция sum, но потом я понимаю, что когда я удаляю элемент из таблицы,не запускается, есть ли EventListener, который я могу использовать, который запускается для любого изменения в таблице?

    document.getElementById('tbody-list').addEventListener('DOMNodeInserted',function(){
  const ui = new UI(); 

  ui.sumValues(); 


});

Answer 1

Вы можете добавить общий класс к тд, содержащий Value1, Value2 Value3.например, все td, имеющие Value1, будут иметь класс val1, аналогично для td, имеющего Value2 и Value3

Теперь вы document.getElementsByClassName, которые дадут коллекцию, затем используйте метод массива для вычислениясумма.Чтобы использовать метод массива Reduce, вы должны преобразовать коллекцию в массив, используя Array.from.

innerHTML выдаст текст внутри td, а trim удалит все пробелы.

0 в Array.from(arr).reduce((acc, curr) => { return acc + parseFloat(curr.innerHTML.trim()) }, 0) - это начальное значение accтак будет как 0+1100 +28+28+28

function doSum(arr) {
  console.log(arr)
  return Array.from(arr).reduce((acc, curr) => {
    return acc + parseFloat(curr.innerHTML.trim())
  }, 0)
}


function calValues() {
  let val1Val = doSum(document.getElementsByClassName('val1'));
  let val2Val = doSum(document.getElementsByClassName('val2'));
  let val3Val = doSum(document.getElementsByClassName('val3'))

  document.getElementById('val1').innerHTML = val1Val.toFixed(2);
  document.getElementById('val2').innerHTML = val2Val.toFixed(2);
  document.getElementById('val3').innerHTML = val3Val.toFixed(2);
}
calValues()

<table id="table1" class="table table-hover table-responsive">
  <thead>
    <tr>

      <th scope="col">Name</th>
      <th scope="col">Value1</th>
      <th scope="col">Value2</th>
      <th scope="col">Value3</th>
      <th scope="col">Info</th>
      <th scope="col">Date</th>
      <th scope="col">Delete</th>

    </tr>
  </thead>

  <tbody id="tbody-list">


    <tr>
      <td>Item1</td>
      <td class='val1'>1100</td>
      <td class='val2'>10</td>
      <td class='val3'>10</td>
      <td>Info</td>
      <td>2019-02-18</td>
      <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr>
    <tr>
      <td>Item2 </td>
      <td class='val1'>28.00 </td>
      <td class='val2'>0.87</td>
      <td class='val3'> 0.00 </td>
      <td>Info</td>
      <td>2019-02-18</td>
      <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr>
    <tr>
      <td>Item3 </td>
      <td class='val1'>28.00 </td>
      <td class='val2'> 0.87</td>
      <td class='val3'> 0.00 </td>
      <td>Info</td>
      <td>2019-02-18</td>
      <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr>
    <tr>
      <td>Item4 </td>
      <td class='val1'>28.00 </td>
      <td class='val2'>0.87</td>
      <td class='val3'> 0.00 </td>
      <td>Info</td>
      <td>2019-02-18</td>
      <td>&nbsp; &nbsp;<a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="h4">TOTAL Values</td>
      <td id="val1"></td>
      <td id="val2"></td>
      <td id="val3"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>