动态可添加行HTML表格中Liter转USG实时计算的jQuery问题

你的问题核心是在遍历所有fuelLiter输入框的循环里，错误地始终用触发事件的输入框所在行来更新USG值，导致无法正确对应到当前输入的行。而且根本没必要遍历所有输入框——输入事件是单个输入框触发的，只需要处理当前触发事件的那一行即可。

错误原因 #

你在each循环里遍历了所有fuelLiter输入框，但更新USG时一直用$(event.target).closest('tr')，这会导致不管遍历到哪一行，都只会更新触发事件的那个输入框所在行的USG字段，完全没用到当前循环的element对应的行。

修正方案 #

直接处理触发事件的单个输入框，定位其所在行的USG字段，无需遍历所有输入框：

_onFuelLiterInput(event) {
    const $literInput = $(event.target);
    let value = 0;
    // 读取并处理输入值
    try {
        value = parseFloat($literInput.val());
        if (isNaN(value)) value = 0;
    } catch (e) {
        value = 0;
    }
    // 升转美制加仑并保留两位小数
    const USG = Math.round(value * 0.26417205235815 * 100) / 100;
    // 定位同行的USG输入框并赋值
    $literInput.closest('tr').find('.fuelUSG').val(USG);
}

关键修正点 #

• 去掉了遍历所有fuelLiter输入框的each循环，只处理当前触发事件的输入框，既高效又避免定位错误。
• 用触发事件的输入框$literInput定位其父级tr，再找到同行的fuelUSG输入框，确保行对应关系完全正确。
• 简化了数值处理逻辑，把isNaN判断合并到try-catch后的流程里。

对应的HTML结构（保留原有结构即可） #

<td class="td-inputData">
    <input class="inputFieldLiter fuelLiter" type="text" name="Fuel[<?php echo $i; ?>][fuelLiter]"
        data-name="fuelLiter"
        value="<?php echo $row['fuelLiter']; ?>" />
</td>
<td class="td-inputData">
    <input class="inputFieldLiter fuelUSG" type="text" name="Fuel[<?php echo $i; ?>][fuelUSG]"
        data-name="fuelUSG"
        value="<?php echo $row['fuelUSG']; ?>" />
</td>

额外提示 #

如果你的动态行是通过JS生成的，要确保新添加的fuelLiter输入框也能触发事件，建议用事件委托绑定：

// 绑定到表格父元素，动态添加的行也能触发输入事件
$('#tankdaten .' + DEFINES.class.DYNAMIC_TABLE).on('input', 'input.fuelLiter', _onFuelLiterInput);

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