javascript - 如何在表中求和 TR

Question

<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

Answer 1

你可以querySelector所有行，删除第一行并获取最后一行来填充值，每行querySelector其列，我已经使用ES6 map和reduce来累加值

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>