js 给table 添加表尾合计

可以使用 JavaScript 来计算表格中每列的总和，并在表格底部添加表尾合计行。

首先，需要在表格 HTML 中添加一个空的表尾行，用于放置计算结果：

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <!-- 表尾行 -->
    <tr id="totalRow">
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

然后，在 JavaScript 中，需要获取表格中每列的数据并计算总和，然后将结果填充到表尾行中：

// 获取表格中每列的数据
const table = document.querySelector('table');
const rows = table.rows;
const numCols = rows[0].cells.length;
const data = new Array(numCols).fill(0);

for (let i = 1; i < rows.length - 1; i++) {
  for (let j = 0; j < numCols; j++) {
    data[j] += parseFloat(rows[i].cells[j].textContent);
  }
}

// 将计算结果填充到表尾行中
const totalRow = table.querySelector('#totalRow');
for (let i = 0; i < numCols; i++) {
  const cell = totalRow.cells[i];
  cell.textContent = data[i];
}

上述代码中，首先获取表格中每列的数据并计算总和，然后将计算结果填充到表尾行中。其中，`parseFloat` 函数用于将单元格中的文本内容转换为数值类型，以便进行数值计算。

最后，将上述代码放置在页面加载完成后执行的回调函数中，以确保表格已经完全加载后再进行计算和填充操作：

window.addEventListener('load', () => {
  // 上述代码
});