如何在可编辑HTML表格中实现Excel式自动计算功能？

完整可行代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; }
        input { width: 80%; padding: 4px; text-align: center; border: none; }
        .error { color: red; font-weight: bold; margin-top: 10px; display: block; }
    </style>
</head>
<body>
    <table id="shippingTable">
        <thead>
            <tr>
                <th>Packages</th>
                <th>Length (cm)</th>
                <th>Width (cm)</th>
                <th>Height (cm)</th>
                <th>Split (%)</th>
                <th>Volume Weight (kg)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Package 1</td>
                <td><input type="number" class="length" min="0"></td>
                <td><input type="number" class="width" min="0"></td>
                <td><input type="number" class="height" min="0"></td>
                <td><input type="number" class="split" min="0" max="100"></td>
                <td class="volume-weight">0</td>
            </tr>
            <tr>
                <td>Package 2</td>
                <td><input type="number" class="length" min="0"></td>
                <td><input type="number" class="width" min="0"></td>
                <td><input type="number" class="height" min="0"></td>
                <td><input type="number" class="split" min="0" max="100"></td>
                <td class="volume-weight">0</td>
            </tr>
            <!-- 可按需添加更多行 -->
        </tbody>
    </table>
    <div id="splitError" class="error" style="display:none;">拆分百分比总和必须为100%</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const table = document.getElementById('shippingTable');
            const splitError = document.getElementById('splitError');

            // 统一监听表格内的输入事件
            table.addEventListener('input', function(e) {
                const target = e.target;
                const row = target.closest('tr');

                // 计算体积重量
                if (target.classList.contains('length') || target.classList.contains('width') || target.classList.contains('height')) {
                    const length = parseFloat(row.querySelector('.length').value) || 0;
                    const width = parseFloat(row.querySelector('.width').value) || 0;
                    const height = parseFloat(row.querySelector('.height').value) || 0;
                    const volumeWeight = (length * width * height) / 200;
                    row.querySelector('.volume-weight').textContent = volumeWeight.toFixed(2);
                }

                // 校验拆分百分比总和
                if (target.classList.contains('split')) {
                    let totalSplit = 0;
                    document.querySelectorAll('.split').forEach(input => {
                        totalSplit += parseFloat(input.value) || 0;
                    });
                    
                    splitError.style.display = totalSplit === 100 ? 'none' : 'block';
                }
            });
        });
    </script>
</body>
</html>

关键修复与实现说明 #

• 事件委托优化：通过表格的input事件委托处理所有输入框变化，无需给每个输入框单独绑定事件，新增行时也能自动生效。
• 体积重量计算：
  • 读取当前行的长、宽、高数值，默认值设为0避免出现NaN
  • 按公式计算后保留两位小数，直接更新对应单元格内容
• 百分比校验：
  • 每次修改Split值时，遍历所有Split输入框求和
  • 总和不等于100时显示错误提示，符合要求则隐藏
• 输入约束：给数字输入框添加min/max属性，限制非法输入范围，减少无效计算

扩展建议 #

• 若需动态添加行，可写一个按钮点击事件，克隆现有表格行插入到tbody中，事件委托会自动处理新行的输入逻辑
• 给体积重量单元格添加pointer-events: none样式，禁止用户手动修改计算结果
• 可优化百分比校验逻辑，比如当总和超过100时自动调整最后一个输入框的值，提升用户体验

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