Как посчитать сумму каждого столбца таблицы html на чистом JS

Question

 <table border="1" id='mainTab'>
<tr>
  <th> Строки </th>
  <th> Столбец1 </th>
  <th> Столбец2 </th>
  <th> Столбец3 </th>
</tr>
<tr>
  <td> Строка 1 </td>
  <td>1000</td>
  <td>200</td>
  <td>25</td>
</tr>
<tr>
  <td>Строка 2</td>
  <td>2000</td>
  <td>400</td>
  <td>15</td>
</tr>
<tr>
  <th> Итого </th>
  <th>
    <!-- тут результат -->
  </th>
  <th>
    <!-- тут результат -->
  </th>
  <th>
    <!-- тут результат -->
  </th>
</tr>

Присваивать каждому элементу таблицы id нельзя. Необходимо забирать из документа всю таблицу и проходиться по строкам и брать каждую ячейку.

Пока остановился на том, что могу проходится и считать сумму строки, а нужен как раз столбец

 var table = document.getElementById("mainTab");
 for (var i = 0, col; row = table.rows[i]; i++) {
   for (var j = 0, col; col = row.cells[j]; j++) {
   }
  }
}

Answer 1

Могу проходится и считать сумму строки

Считали бы так?

let total = 0;
for ( по_строке ) {
  total += значение_клетки
}

А задача со столбиками такая же, просто там нужно параллельно иметь несколько total, каждая из которых будет хранить сумму для клеток под конкретным номером. А для этого можно завести такой массив:

let total = [0,     0,         0,         0,         0];

<td>Строка</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td>

Так, чтобы под каждую <td> была своя "переменная" под соответствующим номером.

let trs = document.querySelectorAll("#mainTab tr");

let total = new Array(trs[0].children.length).fill(0);
// Создает массив размером с количество <th>, заполняет всё нулями

for (let i = 1; i < trs.length - 1; i++) {
  // Перебор не касается первой [0] и последней [trs.length - 1] строки

  let tds = trs[i].children;
  for (let j = 1; j < tds.length; j++) { // Считает все <td> кроме первой [0]
    total[j] += Number(tds[j].textContent);
    // У каждого <td> - своя считалка в массиве, под номером `j`
  }

}

let last_ths = trs[trs.length - 1].children;
for (let i = 1; i < last_ths.length; i++) {
  last_ths[i].textContent = total[i];
  // Вставка результатов в <th> последней строки.
}

#mainTab td, #mainTab th {
  border: 1px solid #b89868;
}

<table id="mainTab">
  <tr>
    <th>Строки</th>
    <th>Столбец1</th>
    <th>Столбец2</th>
    <th>Столбец3</th>
  </tr>
  <tr>
    <td>Строка 1</td>
    <td>1000</td>
    <td>200</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Строка 2</td>
    <td>2000</td>
    <td>400</td>
    <td>15</td>
  </tr>
  <tr>
    <th>Итого</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

Answer 2

var table = document.getElementById("mainTab");
let lastRow = table.rows[table.rows.length - 1];
for (var i = 1; i < table.rows.length - 1; i++) {
  let row = table.rows[i];
  for (var j = 1; j < row.cells.length; j++) {
    let cel = row.cells[j];

    lastRow.cells[j].innerText =
      (Number(lastRow.cells[j].innerText) || 0) + 
      (Number(cel.innerText) || 0);
  }
}

<table border="1" id='mainTab'>
  <tr>
    <th> Строки </th>
    <th> Столбец1 </th>
    <th> Столбец2 </th>
    <th> Столбец3 </th>
  </tr>
  <tr>
    <td> Строка 1 </td>
    <td>1000</td>
    <td>200</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Строка 2</td>
    <td>2000</td>
    <td>400</td>
    <td>15</td>
  </tr>
  <tr>
    <th> Итого </th>
    <th>
      <!-- тут результат -->
    </th>
    <th>
      <!-- тут результат -->
    </th>
    <th>
      <!-- тут результат -->
    </th>
  </tr>

БЛОГ НА HUSL

Как посчитать сумму каждого столбца таблицы html на чистом JS

Ответы (2 шт):