修复JS构建表格添加首列（取消关联列）时的布局错乱问题

核心问题出在编辑模式新增的「取消关联」列没有和Subzone列保持一致的rowspan渲染逻辑，导致表格列数不对齐。以下是具体修复方案：

1. 先按Subzone分组Microzones #

先把关联的microzones按subzone分组，方便计算rowspan：

// 假设subzones每个项有id/name，microzones有subzoneId/name字段
const groupedMicrozones = subzones.reduce((map, subzone) => {
  map[subzone.id] = microzones.filter(mz => mz.subzoneId === subzone.id);
  return map;
}, {});

2. 统一控制单元格渲染逻辑 #

生成表格HTML时，「取消关联」列和Subzone列共用完全相同的渲染规则：

• 仅在当前subzone下第一个microzone对应的行，渲染这两个列的单元格并设置相同的rowspan值
• 后续microzone的行直接跳过这两个列的单元格，避免多余<td>破坏列结构

const tableContainer = document.getElementById('your-table-container');
let tableHtml = `
  <table>
    <thead>
      <tr>
        ${isEdition ? '<th>取消关联</th>' : ''}
        <th>Subzone</th>
        <th>Microzone</th>
      </tr>
    </thead>
    <tbody>
`;

subzones.forEach(subzone => {
  const mzList = groupedMicrozones[subzone.id] || [];
  const rowspanCount = mzList.length;

  mzList.forEach((microzone, idx) => {
    tableHtml += '<tr>';
    
    // 编辑模式：仅第一个行渲染取消关联单元格
    if (isEdition) {
      if (idx === 0) {
        tableHtml += `<td rowspan="${rowspanCount}"><button onclick="desasociar(${subzone.id})">取消关联</button></td>`;
      }
    }

    // Subzone列：仅第一个行渲染并设置rowspan
    if (idx === 0) {
      tableHtml += `<td rowspan="${rowspanCount}">${subzone.name}</td>`;
    }

    // Microzone列每行都渲染
    tableHtml += `<td>${microzone.name}</td></tr>`;
  });
});

tableHtml += '</tbody></table>';
tableContainer.innerHTML = tableHtml;

关键修复点说明 #

• 列数对齐：编辑模式下表头是3列，所以每个<tr>的<td>数量必须匹配：第一个行有3个<td>，后续行只有2个<td>（前两列被rowspan覆盖）
• rowspan同步：「取消关联」列的rowspan值必须和对应Subzone列的rowspan完全一致，确保单元格垂直覆盖的行数相同
• 跳过重复单元格：同一subzone下的后续microzone行，必须跳过「取消关联」和Subzone列的单元格渲染，否则会导致列数溢出，布局错乱

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