Как суммировать TR в TABLE - PullRequest
Новая
       10

Как суммировать TR в TABLE

1 голос
/ 27 февраля 2020 
<table id="tab" border="1">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <!-- HERE IS SUM -->
    <tr>
        <td>?</td>
        <td>?</td>
        <td>?</td>
        <td>?</td>
    </tr>
</table>

Я хочу сложить все данные, которые есть в результате итерации

, поэтому при наличии 10 строк данных будет добавлено 10 строк 

for example
A  B  C  D
2  2  2  2
3  3  3  3
SUM
5  5  5  5

1 Ответ

0 голосов
/ 27 февраля 2020

Вы можете querySelector все строки, удалить первую строку и получить последнюю строку для заполнения значений, и каждая строка querySelector свой столбец, и я использовал ES6 карту и уменьшить для накопления значений 

const rows = Array.from(document.querySelectorAll('tr'));
const lastRow = rows.splice(rows.length - 1, 1)[0];
// Remove first row
rows.splice(0,1);

const sumArr = rows.reduce((acc,row) => {
   const cols = row.querySelectorAll('td');
   return acc.map((c, i) => c + +cols[i].innerHTML);
}, [0,0,0,0]);

const lastRowCols = lastRow.querySelectorAll('td');

sumArr.forEach((s, i) => {
  lastRowCols[i].innerHTML = s; 
})
<table id="tab" border="1">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <!-- HERE IS SUM -->
    <tr>
        <td>?</td>
        <td>?</td>
        <td>?</td>
        <td>?</td>
    </tr>
</table>
...