如何让jQuery函数作用于表格所有行而非仅第一行？

你遇到的核心问题是重复使用了唯一ID——HTML中id属性必须是页面唯一的，当你循环生成表格行时，所有行的输入框都用了prate、pqty、pTotal这三个id，jQuery和原生JS只会匹配第一个出现的元素，所以后面的行完全没反应。

分两步修改：

第一步：把HTML中的id替换为class #

因为class可以重复使用，适合标记同类型的元素。修改后的表格行代码：

<tr>
    <td><?php echo $row['serial no.'] ?></td>
    <td><?php echo $row['pname'] ?></td>
    <td><input type="text" class="form-control prate" name="uprice" value="<?php echo $row['uprice'];?>"></td>
    <td><input type="number" class="form-control pqty" name="quantity" value=""></td>
    <td><input type="text" class="form-control pTotal" name="price" value="" ></td>
</tr>

（顺便清理了PHP里多余的变量赋值，直接输出$row['uprice']即可）

第二步：修改jQuery脚本，基于行内元素关联计算 #

利用DOM遍历，找到当前输入框所在的表格行，再在该行内定位对应的价格、数量、总计输入框，这样每一行的计算都是独立的：

<script>
    // 给所有.prate输入框绑定keyup事件
    $('.prate').keyup(function(){
        // 找到当前输入框所在的<tr>行
        var $row = $(this).closest('tr');
        // 从当前行内获取价格和数量的值
        var prate = $row.find('.prate').val();
        var pqty = $row.find('.pqty').val();
        // 处理空值/非数字情况，避免出现NaN
        prate = prate ? parseInt(prate) : 0;
        pqty = pqty ? parseInt(pqty) : 0;
        // 计算并赋值给当前行的总计框
        $row.find('.pTotal').val(prate * pqty);
    });

    // 给所有.pqty输入框绑定keyup事件，逻辑和上面一致
    $('.pqty').keyup(function(){
        var $row = $(this).closest('tr');
        var prate = $row.find('.prate').val();
        var pqty = $row.find('.pqty').val();
        prate = prate ? parseInt(prate) : 0;
        pqty = pqty ? parseInt(pqty) : 0;
        $row.find('.pTotal').val(prate * pqty);
    });
</script>

额外优化（可选） #

可以把重复的计算逻辑抽成一个函数，减少代码冗余：

<script>
    function calculateTotal($row) {
        var prate = $row.find('.prate').val();
        var pqty = $row.find('.pqty').val();
        prate = prate ? parseInt(prate) : 0;
        pqty = pqty ? parseInt(pqty) : 0;
        $row.find('.pTotal').val(prate * pqty);
    }

    $('.prate, .pqty').keyup(function(){
        calculateTotal($(this).closest('tr'));
    });
</script>

这样不管是价格还是数量输入框触发事件，都会调用同一个计算函数，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Muhammad Shaheer Hashmi