多行表单：输入字段同名时如何更新指定行的输入框

要实现点击按钮后更新对应行的输入字段值，只需做两处关键修改：

1. 调整HTML的按钮点击事件 #

将当前按钮元素作为参数传入avgIN函数，让函数能直接定位到按钮所在行：

<table>
<tr>
<td>Frank</td>
<td>Burns</td>
<td><input type="text" name="overtime" value="1000"></td>
<td><input type="button" name="averageIN" value="Average In" onclick="return avgIN(this, '1000','2000');">
</tr><tr>
<td>John</td>
<td>Doe</td>
<td><input type="text" name="overtime" value="500"></td>
<td><input type="button" name="averageIN" value="Average In" onclick="return avgIN(this, '500','2000');">
</tr>
</table>

2. 完善JavaScript函数逻辑 #

通过传入的按钮元素，逐级定位到对应行的输入框并更新值：

function avgIN(btn, orig, avg) {
    let text = "Request to Average In Overtime:\n\n"+
       "Current OT Total: "+orig+"\n"+
       "Averaged In Total: "+avg+"\n\n"+
       "Click OK to accept";
    if (confirm(text) == true) {
        // 找到按钮所在的表格行
        const targetRow = btn.closest('tr');
        // 在该行内定位name为overtime的输入字段
        const overtimeInput = targetRow.querySelector('input[name="overtime"]');
        // 更新输入字段的值
        overtimeInput.value = avg;
    } else {
        alert("Average In function canceled");
    }
}

逻辑说明 #

• btn.closest('tr')：从点击的按钮元素向上查找最近的<tr>标签，精准锁定按钮所在行
• targetRow.querySelector('input[name="overtime"]')：在目标行内直接筛选出name属性为overtime的输入框，避免全局查找导致的错误匹配

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