如何获取触发事件的动态添加Input元素序号以填充数据库数据？

我想获取动态添加到DOM中的输入框组的准确序号，这样之后就能用模态框里的数据库数据填充对应的输入框。逻辑是用户从模态框选完数据后，选中的数据要填充到当前操作的那个输入框所在的行里。

现有代码 #

var numeroDeInput = 0; 
// 创建原料输入行
$('#materiaPrima').click(function(e) { 
  numeroDeInput = $('.material').length; 
  var tableRow = `
<div class="rowCreated d-flex gap-2 my-2">
  <input type="text" placeholder="Material" class="material form-control buscarMaterial" name="material[]" >
  <input type="number" placeholder="Medida 1" readonly class=" medida_uno form-control" name="medida_uno[]" >
  <input type="number" placeholder="Medida 2" readonly class=" medida_dos form-control" name="medida_dos[]" >
  <input type="number" placeholder="Largo" id="largo" class="form-control calcular" name="largo[]" >
  <input type="number" placeholder="Ancho" id="ancho" class="form-control calcular" name="ancho[]" >
  <input type="number" placeholder="Alto" id="alto" class="form-control calcular" name="alto[]" >
  <input type="number" placeholder="Precio" readonly class="precio form-control" name="precio[]" >
  <input type="number" placeholder="Subtotal" step=".01" readonly class="subtotal form-control" name="subtotal[]" >
  <button type="button" class="btn btn-sm btn-danger py-0 removeRow"><i class="bi bi-x fs-3"></i></button>
</div>`;
  $('.tableBody').append(tableRow); 
  console.log(numeroDeInput); 
});

解决方案 #

核心思路是给每一行添加唯一标识，并在用户触发模态框时记录当前行的标识，最后根据标识定位行填充数据。

1. 修改行创建逻辑，添加唯一标识 #

放弃依赖DOM元素长度（删除行后长度会变化，导致序号混乱），改用独立计数器给每行分配唯一的data-index属性：

let rowIndex = 0;

$('#materiaPrima').click(function(e) {
  rowIndex++;
  const tableRow = `
    <div class="rowCreated d-flex gap-2 my-2" data-index="${rowIndex}">
      <input type="text" placeholder="Material" class="material form-control buscarMaterial" name="material[]">
      <input type="number" placeholder="Medida 1" readonly class="medida_uno form-control" name="medida_uno[]">
      <input type="number" placeholder="Medida 2" readonly class="medida_dos form-control" name="medida_dos[]">
      <input type="number" placeholder="Largo" class="form-control calcular" name="largo[]">
      <input type="number" placeholder="Ancho" class="form-control calcular" name="ancho[]">
      <input type="number" placeholder="Alto" class="form-control calcular" name="alto[]">
      <input type="number" placeholder="Precio" readonly class="precio form-control" name="precio[]">
      <input type="number" placeholder="Subtotal" step=".01" readonly class="subtotal form-control" name="subtotal[]">
      <button type="button" class="btn btn-sm btn-danger py-0 removeRow"><i class="bi bi-x fs-3"></i></button>
    </div>
  `;
  $('.tableBody').append(tableRow);
});

2. 记录当前操作的行 #

用事件委托绑定动态生成的输入框点击事件，把当前行的标识存到模态框中：

// 绑定输入框点击事件，记录目标行
$(document).on('click', '.buscarMaterial', function() {
  const currentRowIndex = $(this).closest('.rowCreated').data('index');
  // 把行标识存到模态框的data属性里，替换成你的模态框ID
  $('#modalMaterial').data('target-row', currentRowIndex);
});

3. 模态框选择后填充数据 #

在模态框的确认按钮点击事件中，根据存储的行标识找到目标行，填充数据：

// 模态框选择数据后的填充逻辑，替换成你的按钮ID
$('#confirmarSeleccion').click(function() {
  // 模拟从数据库获取的选中数据，实际根据业务逻辑获取
  const selectedData = {
    medida1: 15,
    medida2: 30,
    precio: 75.25
  };
  
  // 获取目标行标识
  const targetIndex = $('#modalMaterial').data('target-row');
  // 定位到目标行
  const targetRow = $(`.rowCreated[data-index="${targetIndex}"]`);
  
  // 填充对应输入框
  targetRow.find('.medida_uno').val(selectedData.medida1);
  targetRow.find('.medida_dos').val(selectedData.medida2);
  targetRow.find('.precio').val(selectedData.precio);
  
  // 关闭模态框（可选）
  $('#modalMaterial').modal('hide');
});

4. 补充删除行逻辑（可选） #

如果需要删除行，直接移除对应的DOM元素即可，data-index的唯一性不会受影响：

$(document).on('click', '.removeRow', function() {
  $(this).closest('.rowCreated').remove();
});

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