HTML表格删除空列问题求助：现有代码存在异常

原代码的核心问题是列选择逻辑错误：使用td:eq(idx)是在每个<tr>的子元素中选取第idx个<td>，而非选中表格中对应列的所有<td>。当表格存在行内单元格数量不一致（比如合并单元格、缺失列）时，这个逻辑会误判列是否为空，甚至导致批量删除非空列。

修正后的代码 #

JavaScript 代码 #

// 遍历表格的每一列（基于表头th的数量）
$('th').each(function(idx) {
  // 计算当前列的位置（nth-child是1-based索引，所以要+1）
  const columnIndex = idx + 1;
  // 检查当前列的所有td是否都为空
  const hasContent = $('tr td:nth-child(' + columnIndex + ')').filter(function() {
    return $.trim($(this).text()).length > 0;
  }).length > 0;

  // 显示/隐藏当前列的表头和单元格
  $('th:nth-child(' + columnIndex + '), tr td:nth-child(' + columnIndex + ')').toggle(hasContent);
});

HTML 依赖 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

关键修正点 #

• 改用nth-child(columnIndex)选择列：nth-child基于父元素的子元素位置（1-based），能精准定位表格中对应列的所有单元格，不受行内单元格数量变化影响。
• 明确判断逻辑：只有当列中存在至少一个非空单元格时，才保留该列，否则隐藏。

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