JavaScript动态添加行后Status字段无法自动填充Pass/Fail的问题

问题现象 #

在动态添加的表格行中，第一行的result字段输入值后，status能自动填充pass或fail；但添加第二行后，第二行的result输入内容时，对应的status字段无任何变化。

问题根源 #

1. 选择器仅匹配第一个元素：代码中使用document.querySelector('[name="result"]')这类选择器，querySelector只会返回匹配到的第一个元素。添加多行后，无论操作哪一行的result，都会只读取第一行的result、value_from、value_to值，仅更新第一行的status。
2. 动态元素未绑定事件：初始事件监听仅绑定了页面加载时已存在的输入框，新添加的行输入框没有绑定keyup事件，无法触发计算逻辑。

修复方案 #

1. 精准定位当前行元素：修改sum_method函数，接收当前触发事件的result输入框元素，通过它找到所在的表格行，再在该行内查找对应字段，确保操作的是当前行的元素。
2. 事件委托绑定事件：监听表格的父容器，通过事件委托处理所有动态添加的输入框事件，无需每次新增行都重新绑定。
3. 移除行内事件绑定：删除HTML中result输入框的onkeyup属性，避免重复绑定。

修改后的JavaScript代码 #

// 事件委托：监听表格内所有result输入框的keyup事件
document.querySelector('table').addEventListener('keyup', function(e) {
  // 仅处理带有result类的输入框
  if (e.target.classList.contains('result')) {
    sum_method(e.target);
  }
});

// 处理当前行的状态计算
function sum_method(inputElem) {
  // 获取当前输入框所在的表格行
  const currentRow = inputElem.closest('.row-keranjang-method');
  
  // 在当前行内获取对应字段的值
  const resultVal = inputElem.value.trim();
  const valueFrom = currentRow.querySelector('[name="value_from"]').value.trim();
  const valueTo = currentRow.querySelector('[name="value_to"]').value.trim();
  const statusInput = currentRow.querySelector('[name="status"]');

  // 处理空值或非数字的情况，避免NaN错误
  if (!resultVal || !valueFrom || !valueTo || isNaN(parseInt(resultVal)) || isNaN(parseInt(valueFrom)) || isNaN(parseInt(valueTo))) {
    statusInput.value = '';
    return;
  }

  // 判断结果是否在范围内，更新status值
  const isPass = parseInt(valueFrom) <= parseInt(resultVal) && parseInt(valueTo) >= parseInt(resultVal);
  statusInput.value = isPass ? 'pass' : 'fail';
}

修改后的表格行HTML（移除行内事件） #

<tr class="row-keranjang-method">
    <td class="method_code">
        <input type="hidden" name="id_testmatrix_hidden[]" value="<?= $this->input->post('id_testmatrix')?>">
        <p style="color:blue;"><?= $this->input->post('method_code') ?></p>
        <input type="hidden" name="method_name_hidden[]" value="<?= $this->input->post('method_name')?>">
        <p><?= $this->input->post('method_name') ?></p>
        <input type="hidden" name="method_code_hidden[]" value="<?= $this->input->post('method_code')?>">
    </td>
    <td>
        <p>value from : <strong><input class="value_from" name="value_from" value="<?= $this->input->post('value_from') ?>" style="width: 4%;" disabled></strong>
        to<strong><input class="value_to" name="value_to" value="<?= $this->input->post('value_to') ?>" style="width: 4%;" disabled></strong></p>
        <p><?= $this->input->post('measurement') ?></p>
        <input type="hidden" name="measurement_hidden[]" value="<?= $this->input->post('measurement')?>">  
    </td>
    <td style="width: 10%;"><input class="form-control result" name="result" style="align: middle;"></td>
    <td style="width: 10%;"><input name="status" class="status" disabled></td>
    <td style="width: 10%;">
        <center>
            <button type="button" class="btn btn-lg btn-danger" id="hapus_method" data-nama-method="<?= $this->input->post('method_name')?>"><i class="fa fa-trash"></i></button>
        </center>
    </td>
</tr>

内容的提问来源于stack exchange，提问作者Ayu Asri Lestari