Вычисление суммы последнего столбца в динамически добавляемых строках с использованием JavaScript

Чтобы вычислить сумму последнего столбца в динамически добавляемых строках с помощью JavaScript, вы можете использовать несколько методов. Вот несколько вариантов:

Метод 1. Использование массивов JavaScript

  1. Создайте массив для хранения значений последнего столбца.
  2. Пройтись по каждой строке и извлечь значение последнего столбца.
  3. Поместите извлеченное значение в массив.
  4. Вычислите сумму элементов массива с помощью функции reduce().
let lastColumnValues = [];
let rows = document.querySelectorAll('table tr');
rows.forEach(function(row) {
  let cells = row.querySelectorAll('td');
  let lastCell = cells[cells.length - 1];
  let value = parseFloat(lastCell.innerText);
  if (!isNaN(value)) {
    lastColumnValues.push(value);
  }
});
let sum = lastColumnValues.reduce(function(total, value) {
  return total + value;
}, 0);
console.log('Sum:', sum);

Метод 2: использование jQuery
Если вы используете jQuery, вы можете упростить процесс, используя функцию each()и селекторы jQuery.

let lastColumnValues = [];
$('table tr').each(function() {
  let value = parseFloat($(this).find('td:last').text());
  if (!isNaN(value)) {
    lastColumnValues.push(value);
  }
});
let sum = lastColumnValues.reduce(function(total, value) {
  return total + value;
}, 0);
console.log('Sum:', sum);

Метод 3: использование оператора расширения ES6 и стрелочных функций
В современном JavaScript вы можете использовать оператор расширения ES6 и функции стрелок для достижения более краткого решения.

let lastColumnValues = [...document.querySelectorAll('table tr')]
  .map(row => parseFloat([...row.querySelectorAll('td')].pop().innerText))
  .filter(value => !isNaN(value));
let sum = lastColumnValues.reduce((total, value) => total + value, 0);
console.log('Sum:', sum);