基于JS&HTML5实现表格单元格行列求和的技术求助

首先修正原HTML中的错误：第三行第一个<td>里有多余的</a>标签，需删除。

纯HTML无法自动计算求和，我们可以用JavaScript实现自动计算每行合计与每列总计，以下是完整实现代码：

完整代码 #

<table id="sumTable">
    <caption>Cells</caption>
    <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        <th>Row Total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>9</td>
    </tr>
    <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr id="columnTotals">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<script>
const table = document.getElementById('sumTable');
const rows = table.querySelectorAll('tr');
const columnCount = rows[0].querySelectorAll('th').length - 1; // 排除Row Total列

// 计算每行合计
for (let i = 1; i < rows.length - 1; i++) {
    const cells = rows[i].querySelectorAll('td');
    let rowSum = 0;
    for (let j = 0; j < columnCount; j++) {
        rowSum += parseInt(cells[j].textContent.trim()) || 0;
    }
    const totalCell = document.createElement('td');
    totalCell.textContent = rowSum;
    rows[i].appendChild(totalCell);
}

// 计算每列总计
const totalRow = document.getElementById('columnTotals');
const totalCells = totalRow.querySelectorAll('td');
for (let j = 0; j < columnCount; j++) {
    let colSum = 0;
    for (let i = 1; i < rows.length - 1; i++) {
        colSum += parseInt(rows[i].querySelectorAll('td')[j].textContent.trim()) || 0;
    }
    totalCells[j].textContent = colSum;
}

// 最后一个单元格留空或设为0
totalCells[columnCount].textContent = ''; // 改为'0'即可设置为0
</script>

关键说明 #

• 给表格和总计行添加ID，方便快速定位元素
• 遍历数据行时，自动计算每行数值总和并添加新单元格展示
• 遍历列时，累加对应列所有数据行的数值，填充到总计行
• 用trim()处理单元格文本空格，|| 0避免非数字内容导致计算错误

内容的提问来源于stack exchange，提问作者user19616644