如何删除带动态<th>表头的HTML列并重置Group命名序号

问题根因 #

你当前代码的序号无法跟随删除操作重置，核心原因是使用了全局自增变量groupNum记录序号，删除列时没有同步更新该变量的数值，导致新增列时始终按照累计新增次数生成序号，而非当前页面实际存在的Group列数量计算。

修复方案 #

方案一：同步更新全局变量（小改适配原有逻辑） #

只需要修改deleteLastColumn函数，删除Group列时同步降低序号值即可，同时增加限制避免误删默认的3列固定列：

function deleteLastColumn() {
    // 仅当列数大于默认的3列时才允许删除（即只删自定义Group列）
    if ($('#persons tr:first-child').children().length > 3) {
        $('#persons tr').find('th:last-child, td:last-child').remove();
        // 同步更新序号变量
        if (groupNum > 1) groupNum--;
    }
}

方案二：动态计算序号（更稳定，推荐使用） #

直接废弃全局序号变量，每次新增列时根据当前已有的Group列数动态计算序号，完全避免全局变量不同步的问题，同时修复原代码表头插入td标签的不规范问题：

const tableEl = document.getElementById('persons');

// 新增列函数
function appendColumn() {
  // 计算当前已有Group列数，生成新序号
  const existedGroupCount = tableEl.rows[0].cells.length - 3;
  const newGroupNum = existedGroupCount + 1;

  // 遍历每行新增单元格
  for (let i = 0; i < tableEl.rows.length; i++) {
    let cell;
    if (i === 0) {
      // 表头行生成th标签，和原有结构统一
      cell = document.createElement('th');
      cell.textContent = 'Group' + newGroupNum;
      tableEl.rows[i].appendChild(cell);
    } else {
      // 表体行插入td
      cell = tableEl.rows[i].insertCell(tableEl.rows[i].cells.length);
    }
    createCell(cell, i, 'col');
  }
}

// 单元格内容生成函数
function createCell(cell, text, style) {
  const div = document.createElement('div');
  const txt = document.createTextNode(text);
  div.appendChild(txt);
  div.className = style;
  cell.appendChild(div);
}

// 删除最后一列函数
function deleteLastColumn() {
  // 禁止删除默认的3个固定列
  if ($('#persons tr:first-child').children().length <= 3) return;
  $('#persons tr').find('th:last-child, td:last-child').remove();
}

该方案不需要维护全局变量，完全基于页面实际渲染的列数计算序号，即使出现异常操作也不会出现序号混乱的问题。

内容的提问来源于stack exchange，提问作者WEI ZHUANG GOH