如何使用JavaScript获取表格中跨列覆盖目标单元格的元素

现有如下表格结构：

<table>
  <tbody>
    <tr>
      <td>Column 1</td>
      <td colspan="3">Column 2</td>
      <td>Column 3</td>
      <td colspan="99999">Column 4</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td id="target">C</td>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

需求：使用原生JavaScript或jQuery，获取第一行中通过colspan属性跨列、覆盖id为target的单元格的列元素（或对应索引）。禁止使用getBoundingClientRect()这类基于盒模型位置计算的方法。
在上述示例中，覆盖target单元格的对应元素是文本内容为"Column 2"的单元格。

核心逻辑是基于HTML表格的列合并规则，通过DOM自带的colSpan属性统计列占比，完全不依赖渲染位置计算：

• 先计算目标单元格在自身所在行的起始列序号：遍历目标单元格前面的所有同级单元格，累加每个单元格的colspan值（未设置colspan时默认值为1），累加结果就是目标单元格的列起始索引
• 遍历待查找的目标行（本例为表格第一行）的所有单元格，逐个累加单元格的colspan值，判断当前单元格覆盖的列范围是否包含刚才算出的目标列索引，匹配到的单元格就是要找的跨列覆盖元素

原生JavaScript版本 #

// 获取目标单元格
const targetCell = document.getElementById('target');

// 计算目标单元格的列起始索引
let targetColIndex = 0;
let prevNode = targetCell.previousElementSibling;
while (prevNode) {
  targetColIndex += prevNode.colSpan || 1;
  prevNode = prevNode.previousElementSibling;
}

// 遍历第一行匹配覆盖对应列的单元格
const firstRow = targetCell.closest('table').tBodies[0].rows[0];
let resultCell = null;
let currentColRangeEnd = 0;
for (const cell of firstRow.cells) {
  const span = cell.colSpan || 1;
  // 当前单元格覆盖列范围：[currentColRangeEnd, currentColRangeEnd + span - 1]
  if (targetColIndex >= currentColRangeEnd && targetColIndex < currentColRangeEnd + span) {
    resultCell = cell;
    break;
  }
  currentColRangeEnd += span;
}

// 验证结果：输出Column 2
console.log(resultCell.textContent);

jQuery版本 #

// 获取目标单元格
const $targetCell = $('#target');

// 计算目标单元格的列起始索引
let targetColIndex = 0;
$targetCell.prevAll().each(function() {
  targetColIndex += this.colSpan || 1;
});

// 遍历第一行匹配覆盖对应列的单元格
const $firstRow = $targetCell.closest('table').find('tbody tr:first');
let $resultCell = null;
let currentColRangeEnd = 0;
$firstRow.children('td').each(function() {
  const span = this.colSpan || 1;
  if (targetColIndex >= currentColRangeEnd && targetColIndex < currentColRangeEnd + span) {
    $resultCell = $(this);
    return false; // 匹配到后终止循环
  }
  currentColRangeEnd += span;
});

// 验证结果：输出Column 2
console.log($resultCell.text());

• 完全基于DOM属性计算，不依赖任何盒模型位置API，不受CSS布局、单元格显隐、页面缩放等因素影响
• 自动兼容任意合法colspan值，包括示例中99999这类超大占位列的场景，无需额外特殊处理
• 严格遵循HTML表格的列合并规则，未显式设置colspan的单元格自动按占1列计算，结果和浏览器原生渲染的列对应关系完全一致

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