Jquery On Keyup实现表格每行两数相乘仅首行生效问题排查

嘿，这个问题我太熟了！你遇到的核心问题有两个：

1. ID唯一性冲突 #

HTML里的id属性是全局唯一的，你现在每行都用<span id="mcalPremium">$</span>，浏览器只会识别第一个这个ID的元素，后面的都被忽略了，所以只有第一行能生效。

2. 选择器没有定位到当前行 #

你现在获取输入框值的代码是全局查找所有符合条件的元素，拿到的永远是第一行的输入值，而不是触发事件的那一行的。

修正步骤 #

第一步：修改HTML，把ID换成Class

把每行的结果展示span的id改成class，因为class可以重复用于多个元素：

<td><span class="mcalPremium">$</span></td>

第二步：修改JQuery事件处理逻辑

利用$(this)定位当前触发事件的输入框，再通过它找到所在的行，然后只在当前行内查找需要的元素：

$("#alSublineValSubmitTBL tbody tr td:nth-child(11) input").on('keyup', function (e) {
    // 1. 获取当前触发事件的输入框所在的行
    const currentRow = $(this).closest('tr');
    
    // 2. 在当前行内获取第11列和第9列的输入值
    const ex = currentRow.find('td:nth-child(11) input').val();
    const r = currentRow.find('td:nth-child(9) input').val();
    
    // 3. 类型转换与计算（添加空值/非数字容错处理）
    const exp = parseInt(ex) || 0;
    const rate = parseFloat(r) || 0;
    const premium = rate * exp;
    
    // 4. 在当前行的结果span中显示计算值，并添加千位分隔符
    currentRow.find('.mcalPremium').html('$' + premium).digits();
});

// 千位分隔符函数保留不变
$.fn.digits = function () {
    return this.each(function () {
        $(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
    });
};

额外优化建议 #

如果表格是用户选择行数后动态生成的，建议用事件委托绑定事件，这样新增的行也能正常触发计算：

// 事件委托写法，适配动态生成的表格行
$("#alSublineValSubmitTBL tbody").on('keyup', 'tr td:nth-child(11) input', function (e) {
    const currentRow = $(this).closest('tr');
    const ex = currentRow.find('td:nth-child(11) input').val();
    const r = currentRow.find('td:nth-child(9) input').val();
    
    const exp = parseInt(ex) || 0;
    const rate = parseFloat(r) || 0;
    const premium = rate * exp;
    
    currentRow.find('.mcalPremium').html('$' + premium).digits();
});

这样不管是初始生成的行，还是后来动态添加的行，都能在第11列输入框按键抬起时，正确计算并显示当前行的结果啦！

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