如何用jQuery实现动态表格多行输入求和？现有代码仅首行生效

这个问题我碰到过！核心原因是你用了重复的ID——HTML里ID是唯一标识，当通过while循环生成多行时，每行的输入框都用了相同的ID，jQuery的$("#paye")只会选中第一个匹配的元素，自然只有第一行能正常计算。下面给你一套完整的修复方案：

第一步：修改HTML生成逻辑（替换ID为类） #

把循环生成的输入框和总和显示字段的ID换成类，因为类可以在多个元素上重复使用：

<table id="employee-table">
    <?php 
    // 这里是你的while循环逻辑
    while ($row = $result->fetch_assoc()) { 
    ?>
    <tr>
        <!-- 其他未提及的字段 -->
        <td><input type="number" class="paye" value="<?php echo $row['paye'] ?? 0; ?>"></td>
        <td><input type="number" class="ee_ni" value="<?php echo $row['ee_ni'] ?? 0; ?>"></td>
        <td><input type="number" class="er_ni" value="<?php echo $row['er_ni'] ?? 0; ?>"></td>
        <td><input type="number" class="pension" value="<?php echo $row['pension'] ?? 0; ?>"></td>
        <td><span class="total">0</span></td> <!-- 或用readonly的input显示总和 -->
    </tr>
    <?php } ?>
</table>

注：用type="number"可以限制输入为数字，避免非数字输入导致计算错误

第二步：重写jQuery计算逻辑 #

修改后的代码会针对当前输入框所在的行单独计算，不会影响其他行，同时支持页面加载时初始化所有行的总和：

$(document).ready(function() {
    // 页面加载完成后，先计算所有行的初始总和
    calculateAllRows();

    // 用事件委托绑定输入事件（支持后续动态添加的行）
    $("#employee-table").on("keydown keyup", ".paye, .ee_ni, .er_ni, .pension", function() {
        // 找到当前输入框所属的行
        const currentRow = $(this).closest("tr");
        // 计算当前行的总和
        calculateRowTotal(currentRow);
    });

    // 计算单行总和的工具函数
    function calculateRowTotal(row) {
        // 获取当前行四个输入框的值，空值/非数字默认转为0
        const paye = parseFloat(row.find(".paye").val()) || 0;
        const eeNi = parseFloat(row.find(".ee_ni").val()) || 0;
        const erNi = parseFloat(row.find(".er_ni").val()) || 0;
        const pension = parseFloat(row.find(".pension").val()) || 0;

        // 计算总和并保留两位小数（可根据需求调整）
        const total = (paye + eeNi + erNi + pension).toFixed(2);
        // 把结果赋值到当前行的总和显示字段
        row.find(".total").text(total);
    }

    // 计算所有行总和的函数
    function calculateAllRows() {
        $("#employee-table tr").each(function() {
            calculateRowTotal($(this));
        });
    }
});

关键细节说明 #

• 类选择器代替ID：解决了重复ID导致的选择器失效问题，确保每行的输入框都能被正确识别。
• closest("tr")定位行：精准找到当前输入框所在的行，保证计算只针对当前行，不会干扰其他行的数据。
• 事件委托：绑定事件到表格本身而不是单个输入框，即使后续通过JS动态添加新行，新输入框也能自动触发计算逻辑。
• 空值/非数字处理：用|| 0确保空输入或非数字输入不会导致计算结果为NaN。

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