如何基于Quantity数组字段填充对应行的Amount $ (Tax Included)数组字段？

问题分析 #

你需要实现的是：当用户在某一行的Quantity（对应amt[]输入框）中输入数值时，将该数值同步填充到同一行的Amount $ (Tax Included)（对应sum[] span标签）中。原代码的核心问题在于元素选择错误和匹配逻辑不精准。

核心问题点 #

1. 错误选择元素：sum[]对应的是<span>标签，不是<input>，原代码中$("input[name='sum[i]']")选择器完全错误。
2. 变量拼接错误：选择器中的i被当作字符串处理，没有作为变量插入，无法定位到对应索引的元素。
3. 冗余遍历：循环所有行的操作没必要，只需要处理当前触发输入的那一行即可，既浪费性能又容易出错。

修正后的代码 #

HTML结构（保持原有结构） #

<td align="right"><input class="amt" id="amt" name="amt[]" step="0.01" type="number" required /></td>
<td align="right" height="32" class="label"><span id="sum" name="sum[]">0.00&nbsp;</span></td>

jQuery代码 #

$(document).ready(function() {
  // 绑定amt输入框的change事件
  $('input[name="amt[]"]').on('change', function() {
    // 获取当前输入框的有效值
    var inputVal = $(this).val().trim();
    // 定位到当前输入框所在行的sum span
    var targetSum = $(this).closest('tr').find('span[name="sum[]"]');
    
    // 根据输入值更新sum内容，空值时重置为默认的0.00
    if (inputVal) {
      targetSum.text(inputVal);
    } else {
      targetSum.text('0.00');
    }
  });
});

代码说明 #

• 精准匹配行元素：用closest('tr')找到当前输入框所在的表格行，再通过find定位到该行的sum[] span，不管表格行数如何变化，都能确保对应到同一行的元素，比依赖索引更可靠。
• 只处理当前行：避免遍历所有输入框，提升代码性能，同时逻辑更清晰。
• 空值处理：当输入框被清空时，自动将sum重置为默认的0.00，保持界面一致性。

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