表单含多个同名输入元素时，如何获取行索引并操作同行元素

我有一个包含多行重复信息的表单，结构如下：

<form>
   <input name="a[]">
   <input name="b[]">
   <input name="d[]">
   <input name="e[]">
   <br>
   <input name="a[]">
   <input name="b[]">
   <input name="d[]">
   <input name="e[]">
   <br>
   <input name="a[]">
   <input name="b[]">
   <input name="d[]">
   <input name="e[]">
   ...
</form>

需求简化说明：当用户修改某一行的元素时，要检测到该行变动，并能程序化修改该行的其他输入元素。例如，修改第二个b[]时，需要更新第二个c[]。要求方案具备通用性，能适配任意类似表单。

目前已为表单内所有元素添加change事件，但无法获取输入元素的行索引——比如判断当前是第二个a[]，进而找到对应行的b[]。设想的代码逻辑如下：

inputs = resultForm.querySelectorAll('input, select, textarea')
for (var i = 0; i < inputs.length; i++) {
   inputs[i].onchange = function(e) {
      // 想要实现的逻辑
      row = this.name.index;
      
      document.getElementsByName("b[]")[row].value = "a form element in this row was clicked";
   }
}

试过的方法：遍历所有同名字段找到触发元素的索引来确定行号，但这种方法不够通用，因为字段名称不固定为a、b、c等。求可行的通用解决方案。

方法1：用父容器标记行（推荐） #

先修改HTML结构，给每一行添加明确的容器（比如<div class="form-row">）代替<br>分隔，这样能直接通过DOM层级定位当前元素所在行，完全不依赖字段名：

修改后的HTML：

<form>
   <div class="form-row">
      <input name="a[]">
      <input name="b[]">
      <input name="d[]">
      <input name="e[]">
   </div>
   <div class="form-row">
      <input name="a[]">
      <input name="b[]">
      <input name="d[]">
      <input name="e[]">
   </div>
   <div class="form-row">
      <input name="a[]">
      <input name="b[]">
      <input name="d[]">
      <input name="e[]">
   </div>
   ...
</form>

对应的JS代码：

const inputs = resultForm.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
  input.addEventListener('change', function(e) {
    // 获取当前元素所在的行容器
    const currentRow = this.closest('.form-row');
    // 在该行内找到目标元素，比如name为b[]的输入框
    const targetInput = currentRow.querySelector('[name="b[]"]');
    if (targetInput) {
      targetInput.value = "当前行元素已修改";
    }
  });
});

优势：

• 完全通用，不管字段名、一行元素数量多少，只要行结构明确就能用
• DOM操作高效，无需遍历所有同名字段
• 逻辑清晰，可读性强

方法2：通过同名字段的索引匹配（兼容现有HTML结构） #

如果不能修改现有HTML结构，可依赖字段索引的一一对应关系实现：

const inputs = resultForm.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
  input.addEventListener('change', function(e) {
    // 提取字段名（去掉[]后缀）
    const fieldName = this.name.replace('[]', '');
    // 获取当前字段的所有同名字段集合
    const sameNameFields = resultForm.querySelectorAll(`[name="${fieldName}[]"]`);
    // 找到当前元素在同名字段中的索引
    const rowIndex = Array.from(sameNameFields).indexOf(this);
    
    // 示例：修改当前行的b[]元素
    const targetFields = resultForm.querySelectorAll('[name="b[]"]');
    if (targetFields[rowIndex]) {
      targetFields[rowIndex].value = "当前行元素已修改";
    }
  });
});

注意事项：

• 要求每一行的字段顺序完全一致，无缺失，否则索引会错位
• 无需修改HTML，但通用性略弱，依赖字段命名格式为xxx[]

方法3：给元素添加自定义属性存储行索引 #

如果前两种方法不适用，可在初始化时给每个元素添加data-row-index属性存储行号：

const rows = [];
let currentRow = [];
// 按<br>分隔分组行内元素
resultForm.querySelectorAll('input, select, textarea').forEach(input => {
  currentRow.push(input);
  // 下一个元素是<br>或无后续元素时，结束当前行分组
  if (input.nextElementSibling?.tagName === 'BR' || !input.nextElementSibling) {
    rows.push(currentRow);
    currentRow = [];
  }
});

// 给每个元素添加行索引属性
rows.forEach((row, index) => {
  row.forEach(input => {
    input.dataset.rowIndex = index;
  });
});

// 绑定change事件
resultForm.querySelectorAll('input, select, textarea').forEach(input => {
  input.addEventListener('change', function(e) {
    const rowIndex = this.dataset.rowIndex;
    // 获取当前行的所有元素
    const targetRow = rows[rowIndex];
    // 示例：找到当前行的b[]元素
    const targetInput = targetRow.find(el => el.name === 'b[]');
    if (targetInput) {
      targetInput.value = "当前行元素已修改";
    }
  });
});

优势：

• 无需修改HTML结构
• 初始化后可直接通过自定义属性获取行索引，事件触发时操作高效

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