jQuery行求和批量处理问题：替换ID为类后失效求指导

首先，你的问题出在修改后的jQuery代码没有限定当前行的作用域，直接用类选择器会选中页面上所有对应类的元素，而且代码的逻辑结构也有错误（比如total变量的作用域、事件绑定的位置、赋值语句的位置）。下面是修复后的完整方案：

第一步：修正Razor代码，统一使用类名 #

把原来带数字后缀的ID替换成统一的类名，确保每行的输入框都有对应的类，同时保留模型绑定的正确性：

<div style="padding:10px" class="row">
    <div class="left">
        @Html.EditorFor(model => model.a, new { htmlAttributes = new { Type = "Text", placeholder = "ProductName" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.b, new { htmlAttributes = new { @class = "qty", Type = "Text", placeholder = "Qty" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.c, new { htmlAttributes = new { @class = "price", Type = "Text", placeholder = "Price" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.d, new { htmlAttributes = new { @class = "disc", Type = "Text", placeholder = "Discount" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.e, new { htmlAttributes = new { @class = "total-amount", Type = "Text", placeholder = "Total Amount" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.f, new { htmlAttributes = new { Type = "Text", placeholder = "Remarks" } })
    </div>
</div>
<!-- 第二行（后续新增行也可以复用这个结构） -->
<div style="padding:10px" class="row">
    <div class="left">
        @Html.EditorFor(model => model.a, new { htmlAttributes = new { Type = "Text", placeholder = "ProductName" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.b, new { htmlAttributes = new { @class = "qty", Type = "Text", placeholder = "Qty" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.c, new { htmlAttributes = new { @class = "price", Type = "Text", placeholder = "Price" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.d, new { htmlAttributes = new { @class = "disc", Type = "Text", placeholder = "Discount" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.e, new { htmlAttributes = new { @class = "total-amount", Type = "Text", placeholder = "Total Amount" } })
    </div>
    <div class="left">
        @Html.EditorFor(model => model.f, new { htmlAttributes = new { Type = "Text", placeholder = "Remarks" } })
    </div>
</div>
<!-- 总额输入框 -->
<input type="text" id="NetAmt" placeholder="Net Amount" />

第二步：修正jQuery代码，限定行内作用域并优化逻辑 #

核心思路是：

• 给每个.row内的输入框绑定事件
• 当输入时，先找到当前输入框所在的.row（用$(this).closest('.row')）
• 在这个行内查找对应的类元素，避免影响其他行
• 计算当前行的总额后，再遍历所有行计算总和更新到NetAmt

// 给所有行内的qty、price、disc绑定输入事件
$('.row').on('input', '.qty, .price, .disc', function() {
    // 获取当前输入框所在的行
    const $row = $(this).closest('.row');
    
    // 从当前行内获取对应的值，避免选中其他行的元素
    const qty = Number($row.find('.qty').val()) || 0;
    const price = Number($row.find('.price').val()) || 0;
    const disc = Number($row.find('.disc').val()) || 0;
    
    // 计算当前行的总额
    const subtotal = qty * price;
    const total = subtotal - (subtotal * (disc / 100));
    
    // 更新当前行的total-amount输入框
    $row.find('.total-amount').val(total.toFixed(2)); // 保留两位小数更友好
    
    // 计算所有行的总额总和，更新NetAmt
    let netTotal = 0;
    $('.row .total-amount').each(function() {
        netTotal += Number($(this).val()) || 0;
    });
    $('#NetAmt').val(netTotal.toFixed(2));
});

关键修复点说明 #

1. 作用域限定：用closest('.row')锁定当前操作的行，然后用find()在该行内查找元素，解决了类选择器全局匹配的问题。
2. 事件委托优化：用.row作为事件委托的容器，即使后续动态新增行（比如点击添加按钮新增一行），事件也能自动绑定，不需要重新绑定事件。
3. 值的安全处理：用|| 0替代isNaN判断，简化代码的同时确保空值或非数字值被当作0处理。
4. 小数格式化：用toFixed(2)确保金额显示两位小数，符合财务场景的需求。

界面效果参考：

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