JavaScript解析含rowSpan/colSpan的复杂表格技术问题

核心思路 #

解决单元格与行/列分类匹配混乱的核心是维护实时的分类状态跟踪器，逐行逐列遍历表格时，同步更新当前行/列的分类层级状态，处理跨行列单元格时，将分类状态延续到对应的后续行/列中。

实现步骤 #

1. 定义分类配置结构 #

先明确行、列的分类层级与取值，以希伯来语词形变化表为例：

const tableConfig = {
  // 行分类层级：[时态, 人称]
  rowLevels: [
    { key: 'tense', options: ['past', 'present', 'future'] },
    { key: 'person', options: ['first', 'second', 'third'] }
  ],
  // 列分类层级：[单复数, 性别]
  colLevels: [
    { key: 'number', options: ['singular', 'plural'] },
    { key: 'gender', options: ['m', 'f', 'm+f'] }
  ]
};

2. 初始化状态跟踪器 #

创建两个数组分别跟踪当前行、列的分类状态，数组长度对应分类层级数：

// 行分类跟踪：跨行会延续状态，用队列存储后续行的预填充分类
let currentRowStatus = new Array(tableConfig.rowLevels.length).fill(null);
const rowStatusQueue = {};

// 列分类跟踪：每行遍历前重置，跨列会延续到当前行的后续列
let currentColStatus = new Array(tableConfig.colLevels.length).fill(null);

3. 逐行逐列遍历处理 #

const targetTable = document.querySelector('table');
const parsedResult = [];

targetTable.querySelectorAll('tr').forEach((row, rowIdx) => {
  // 重置当前行的列分类状态
  currentColStatus = new Array(tableConfig.colLevels.length).fill(null);
  const cells = row.querySelectorAll('td, th');
  let colIdx = 0;

  // 读取队列中当前行的预填充行分类（处理跨rowSpan的表头）
  if (rowStatusQueue[rowIdx]) {
    currentRowStatus = rowStatusQueue[rowIdx];
    delete rowStatusQueue[rowIdx];
  }

  while (colIdx < cells.length) {
    const cell = cells[colIdx];
    const cellText = cell.textContent.trim();
    if (!cellText) {
      colIdx++;
      continue;
    }

    // 更新行分类状态：判断单元格是否为行表头，对应层级更新
    const rowLevel = getRowHeaderLevel(cell);
    if (rowLevel !== -1) {
      currentRowStatus[rowLevel] = cellText;
      // 处理跨rowSpan：将当前行分类状态存入后续行的队列
      const rowSpan = parseInt(cell.getAttribute('rowspan')) || 1;
      for (let i = 1; i < rowSpan; i++) {
        const targetRowIdx = rowIdx + i;
        rowStatusQueue[targetRowIdx] = [...currentRowStatus];
      }
    }

    // 更新列分类状态：判断单元格是否为列表头，对应层级更新
    const colLevel = getColHeaderLevel(cell);
    if (colLevel !== -1) {
      currentColStatus[colLevel] = cellText;
      // 处理跨colSpan：将分类同步到当前行的后续列状态
      const colSpan = parseInt(cell.getAttribute('colspan')) || 1;
      // 若为性别合并项（如m+f），直接赋值给对应列层级
      if (cellText.includes('+')) {
        currentColStatus[colLevel] = cellText.split('+');
      }
      // 跨列时延续当前层级分类到后续列
      for (let i = 1; i < colSpan; i++) {
        currentColStatus[colLevel] = currentColStatus[colLevel];
      }
    }

    // 匹配词形内容单元格：关联当前行/列分类
    if (isInflectionCell(cell)) {
      parsedResult.push({
        text: cellText,
        rowCategories: [...currentRowStatus],
        colCategories: [...currentColStatus]
      });
    }

    // 跳过跨列的单元格索引
    const colSpan = parseInt(cell.getAttribute('colspan')) || 1;
    colIdx += colSpan;
  }
});

4. 关键辅助函数示例 #

• 判断行表头所属层级：

function getRowHeaderLevel(cell) {
  // 根据单元格class或位置判断层级，例如希伯来语表中时态表头有class 'tense-header'
  if (cell.classList.contains('tense-header')) return 0;
  if (cell.classList.contains('person-header')) return 1;
  return -1;
}

• 判断是否为词形内容单元格：

function isInflectionCell(cell) {
  // 通过正则匹配希伯来语字符，排除表头单元格
  return /[\u0590-\u05FF]/.test(cell.textContent) && !cell.classList.contains('header');
}

解决分类混乱的核心注意点 #

• 跨行列状态延续：跨rowSpan的表头分类需存入后续行的状态队列，跨colSpan的表头要同步更新当前行的后续列状态。
• 状态深拷贝：存储分类状态时必须用[...currentRowStatus]深拷贝，避免后续修改覆盖已保存的结果。
• 层级顺序严格匹配：跟踪数组的索引必须和配置的分类层级顺序完全对应，不能颠倒。
• 单元格类型区分：明确区分表头（更新分类）和内容单元格（匹配分类），避免逻辑混淆。

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