如何关联两个表格中新增的<tr>行，实现数据同步？

问题说明 #

当前代码存在的问题：新增的主表格<tr>行无法像初始行那样，将Item和Quantity值同步到对应副表格行中。需求是主表格每一行的Item、Quantity数据，同步到副表格对应行的Item2、Qtyent、Balanceqty字段，初始行正常但新增行失效。

示例效果：
主表格：

副表格同步后：

问题根源 #

• 原代码中使用$item = $('input[name ="Item"]')这类选择器，只会选中第一个匹配的元素，新增行的输入框不会被纳入同步范围，导致始终只操作第一行的副表格元素。
• 同步逻辑未关联主副表格的对应行索引，无法实现行对行的数据映射。

修复后的完整代码 #

HTML 部分 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
  <table class="table">
    <thead>
      <tr>
        <th>Item</th>
        <th>Quantity</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody class="tbody">
      <tr>
        <td>
          <input type="text" name="Item" class="firsttable form-control" required>
        </td>
        <td>
          <input type="number" name="Quantity" class="firsttable form-control" required>
        </td>
        <td>
          <input type="text" name="Description" class="firsttable form-control" required>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">
          <button class="btn btn-primary item-add-onclick">Add Row</button>
        </td>
      </tr>
    </tfoot>
  </table>

  <table class="table mt-3">
    <thead>
      <tr>
        <th>Item</th>
        <th>Qty Enter</th>
        <th>Qty Exit</th>
        <th>Balance Qty</th>
        <th>Guard On Duty</th>
        <th>Date and Time</th>
      </tr>
    </thead>
    <tbody class="tablebody">
      <tr class="tablerow">
        <td>
          <input type="text" name="Item2" class="secondtable form-control" disabled>
        </td>
        <td>
          <input type="number" name="Qtyent" class="secondtable form-control" disabled>
        </td>
        <td>
          <input type="text" name="Qtyext" class="secondtable form-control" required>
        </td>
        <td>
          <input type="number" name="Balanceqty" class="secondtable form-control" min="0" readonly>
        </td>
        <td>
          <input type="text" name="Guard" class="secondtable form-control" required>
        </td>
        <td>
          <input type="datetime-local" name="DatenTime" class="secondtable form-control" required>
        </td>
      </tr>
    </tbody>
  </table>
  <script>
    // JS 代码可放在此处或外部文件引入
  </script>
</body>
</html>

JavaScript 部分 #

$(document).on('change', "tbody.tbody td input.firsttable", function() {
  // 获取当前输入框所在的主表格行
  const $currentRow = $(this).closest('tr');
  // 获取当前行的索引
  const rowIndex = $currentRow.index();
  // 获取对应索引的副表格行
  const $targetRow = $('.tablebody tr').eq(rowIndex);

  // 从当前主表格行提取数据
  const itemValue = $currentRow.find('input[name="Item"]').val();
  const quantityValue = $currentRow.find('input[name="Quantity"]').val();

  // 同步到副表格对应行
  $targetRow.find('input[name="Item2"]').val(itemValue);
  $targetRow.find('input[name="Qtyent"]').val(quantityValue);
  $targetRow.find('input[name="Balanceqty"]').val(quantityValue);
});

$(document).on('click', '.item-add-onclick', function() {
  // 新增主表格行
  const mainRow = `
    <tr>
      <td>
        <input type="text" name="Item" class="firsttable form-control" required>
      </td>
      <td>
        <input type="number" name="Quantity" class="firsttable form-control" required>
      </td>
      <td>
        <input type="text" name="Description" class="firsttable form-control" required>
      </td>
    </tr>
  `;
  $('.tbody').append(mainRow);

  // 新增对应副表格行
  const subRow = `
    <tr class="tablerow">
      <td>
        <input type="text" name="Item2" class="secondtable form-control" disabled>
      </td>
      <td>
        <input type="number" name="Qtyent" class="secondtable form-control" disabled>
      </td>
      <td>
        <input type="text" name="Qtyext" class="secondtable form-control" required>
      </td>
      <td>
        <input type="number" name="Balanceqty" class="secondtable form-control" min="0" readonly>
      </td>
      <td>
        <input type="text" name="Guard" class="secondtable form-control" required>
      </td>
      <td>
        <input type="datetime-local" name="DatenTime" class="secondtable form-control" required>
      </td>
    </tr>
  `;
  $('.tablebody').append(subRow);
});

关键改动说明 #

• 移除全局单元素选择器：不再使用$item = $('input[name="Item"]')这类只会选中第一个元素的选择器，改为在事件中通过当前元素定位所在行。
• 行索引关联：通过closest('tr')获取当前输入框所在行，再用index()拿到行索引，找到副表格中同索引的行，实现行对行的精准同步。
• 新增行同步：点击添加按钮时，同时在主副表格新增行，确保两行数量始终一致，索引对应关系不被破坏。
• 优化样式：给输入框添加form-control类，适配Bootstrap样式，提升视觉体验。

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