将表格add row list从Design A改为Design B时遇错误，求解决方案

我在把表格的新增行逻辑从Design A改成Design B时遇到了错误，目前无法正常运行。Design B的核心要求是每个组仅需一个Serial Number，而非Design A中每行都带独立的Serial Number。

Design A 代码示例 #

<table id="data-table">
  <thead>
    <tr>
      <th>Serial Number</th>
      <th>Item Name</th>
      <th>Quantity</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="serial-input"></td>
      <td><input type="text" class="item-input"></td>
      <td><input type="number" class="qty-input"></td>
      <td><button class="add-row-btn">Add Row</button></td>
    </tr>
  </tbody>
</table>

<script>
document.querySelector('.add-row-btn').addEventListener('click', function() {
  const tableBody = document.getElementById('data-table').querySelector('tbody');
  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td><input type="text" class="serial-input"></td>
    <td><input type="text" class="item-input"></td>
    <td><input type="number" class="qty-input"></td>
    <td><button class="add-row-btn">Add Row</button></td>
  `;
  tableBody.appendChild(newRow);
});
</script>

设计对比截图 #

• Design A 截图：Design A - 每行独立显示Serial Number
• Design B 截图：Design B - 一组共享一个Serial Number

解决思路 #

1. 重构表格结构，区分组头与组内行 #

把Serial Number放在组头单元格，通过rowspan属性让它跨组内所有行，组内行只保留Item Name、Quantity等字段，避免重复的Serial Number输入框：

<table id="data-table">
  <thead>
    <tr>
      <th>Serial Number</th>
      <th>Item Name</th>
      <th>Quantity</th>
      <th>Action</th>
    </tr>
  </thead>
  <!-- 用tbody划分不同组，DOM结构更清晰 -->
  <tbody class="group">
    <tr class="group-header">
      <!-- rowspan初始为1，新增组内行时动态更新 -->
      <td rowspan="1"><input type="text" class="serial-input"></td>
      <td><input type="text" class="item-input"></td>
      <td><input type="number" class="qty-input"></td>
      <td>
        <button class="add-row-to-group">Add Row to Group</button>
        <button class="add-new-group">Add New Group</button>
      </td>
    </tr>
  </tbody>
</table>

2. 重写新增行逻辑，区分“新增组”和“组内新增行” #

动态元素必须用事件委托绑定点击事件，否则新增的按钮会失效。核心逻辑：

• 点击Add New Group：创建一个全新的组（包含组头和初始行）
• 点击Add Row to Group：在当前组下新增一行，同时更新组头Serial Number单元格的rowspan值，保证布局正常

document.addEventListener('click', function(e) {
  // 新增完整组
  if (e.target.classList.contains('add-new-group')) {
    const table = document.getElementById('data-table');
    const newGroup = document.createElement('tbody');
    newGroup.className = 'group';
    newGroup.innerHTML = `
      <tr class="group-header">
        <td rowspan="1"><input type="text" class="serial-input"></td>
        <td><input type="text" class="item-input"></td>
        <td><input type="number" class="qty-input"></td>
        <td>
          <button class="add-row-to-group">Add Row to Group</button>
          <button class="add-new-group">Add New Group</button>
        </td>
      </tr>
    `;
    table.appendChild(newGroup);
  }

  // 组内新增行
  if (e.target.classList.contains('add-row-to-group')) {
    const group = e.target.closest('.group');
    const groupHeader = group.querySelector('.group-header');
    const serialCell = groupHeader.querySelector('td[rowspan]');
    
    // 更新rowspan，让Serial Number单元格覆盖新增的行
    const currentSpan = parseInt(serialCell.getAttribute('rowspan')) || 1;
    serialCell.setAttribute('rowspan', currentSpan + 1);

    // 创建组内行，不带Serial Number
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
      <td><input type="text" class="item-input"></td>
      <td><input type="number" class="qty-input"></td>
      <td><button class="remove-row">Remove Row</button></td>
    `;
    group.appendChild(newRow);
  }

  // 删除组内行，同步更新rowspan
  if (e.target.classList.contains('remove-row')) {
    const row = e.target.closest('tr');
    const group = row.closest('.group');
    const groupHeader = group.querySelector('.group-header');
    const serialCell = groupHeader.querySelector('td[rowspan]');
    
    const currentSpan = parseInt(serialCell.getAttribute('rowspan')) || 1;
    serialCell.setAttribute('rowspan', currentSpan - 1);
    row.remove();
  }
});

3. 调整数据提交逻辑，关联组内数据 #

如果需要提交表单，要把同一组的Serial Number和所有组内行的Item、Quantity打包成结构化数据，避免数据混乱：

function submitForm() {
  const groups = document.querySelectorAll('.group');
  const submitData = [];

  groups.forEach(group => {
    const serial = group.querySelector('.serial-input').value;
    const items = [];
    
    // 遍历组内所有行（组头+组内行）
    const rows = group.querySelectorAll('tr');
    rows.forEach(row => {
      const itemName = row.querySelector('.item-input').value;
      const qty = row.querySelector('.qty-input').value;
      if (itemName && qty) { // 过滤空输入
        items.push({ itemName, quantity: qty });
      }
    });

    if (serial && items.length > 0) {
      submitData.push({ serialNumber: serial, items });
    }
  });

  // 这里替换成实际的提交逻辑（比如AJAX）
  console.log('提交的数据:', submitData);
}

4. 排查常见错误点 #

• 布局错乱：检查rowspan是否同步更新，新增/删除行时必须修改组头单元格的rowspan值
• 按钮失效：动态创建的按钮不能直接绑定事件，必须用事件委托（监听父元素的点击事件）
• 数据关联错误：提交数据时要确保同一组的Serial Number和Item是绑定的，不要把不同组的数据混在一起

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