如何在多行表格中将计算结果显示到对应行的input输入框中

首先要修正一个HTML规范问题：id属性在页面中必须唯一，所以不能给多行的输入框都设置id="total"，建议改成用class标识，比如把每行的结果输入框写成 <input class="total">。

接下来修改你的脚本，核心是通过当前操作的输入框定位到它所在的表格行，再找到该行内的结果输入框并赋值：

修改后的完整脚本：

var strClass = $(this).prop("class");
var intTotal = 1;
$.each($("input:text." + strClass), function () {
    var intInputValue = parseInt($(this).val());
    if (!isNaN(intInputValue))
    {
        intTotal = intTotal * intInputValue;
    }
});
// 定位到当前输入框所在的行，找到该行的.total输入框并赋值
$(this).closest("tr").find(".total").val(intTotal);

关键逻辑说明： #

• $(this).closest("tr")：找到当前触发计算的输入框所在的最近的<tr>元素（即当前表格行）
• .find(".total")：在该行范围内查找class为total的输入框，确保只操作当前行的结果框
• .val(intTotal)：把计算结果赋值给这个输入框

这样就能实现每行的计算结果对应显示到本行的结果输入框中，解决多行场景下的匹配问题。

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