如何用jQuery绑定表格中动态添加的两个输入框实现值自动填充

AI 小北

2026-10-2

问题根源

HTML中id属性要求全局唯一，循环生成多组输入框时重复使用相同id，会导致jQuery默认仅匹配页面中第一个对应id的元素，无法正确获取动态生成的输入框的值，也无法完成同组输入框的配对赋值。
原代码中直接使用全局ID选择器取值、赋值，没有和当前触发事件的输入框做关联，无法匹配到对应行的第二个输入框。

解决方案

第一步：调整动态生成的输入框结构

去掉重复的id，改用class标识两类输入框，保证同组的两个输入框在同一个<tr>（表格行）父容器内，生成的结构参考：

<tr>
  <td><input type="text" class="changeReviewer"></td>
  <td><input type="text" class="changeReviewerEmail"></td>
</tr>

第二步：修改事件绑定逻辑

使用事件委托绑定输入事件，通过当前触发事件的元素$(this)定位同组的邮箱输入框，代码如下：

$(document).on('input', '.changeReviewer', function () {
    // 取当前输入框的值做处理
    var stt = $(this).val().replace(/ /g,'.');
    // 定位当前行的邮箱输入框赋值
    $(this).closest('tr').find('.changeReviewerEmail').val(stt + "@xxxxxx.com");
});

优化建议

如果承载输入框的表格是页面加载时就存在的静态元素，可把事件委托的根节点从document改成表格的选择器，提升事件触发效率，示例：

// 替换#yourTableId为你实际的表格ID
$('#yourTableId').on('input', '.changeReviewer', function () {
    var stt = $(this).val().replace(/ /g,'.');
    $(this).closest('tr').find('.changeReviewerEmail').val(stt + "@xxxxxx.com");
});