实现类Excel带合并单元格表格的箭头键焦点移动修复请求

• 需求：实现类Excel的表格焦点移动功能，支持通过方向键在包含合并单元格（colspan≥2）的表格内切换焦点
• 现状：普通表格的焦点转移逻辑已正常工作，但存在合并单元格时，焦点移动出现异常
• 问题根源：当前依赖rows.length和cols.length直接统计单元格数量，未考虑合并单元格占据的多列空间，导致移动计算逻辑错误

放弃直接使用行列长度统计，改为为每个单元格建立网格位置映射：记录每个单元格的行号、起始列号、结束列号。方向键移动时，基于当前单元格的网格坐标计算目标位置，再匹配到对应的DOM元素。

// 初始化表格的网格映射，记录每个单元格占据的网格位置
function initTableGrid(table) {
  const grid = [];
  const rows = table.querySelectorAll('tr');
  
  rows.forEach((row, rowIndex) => {
    const cells = row.querySelectorAll('td, th');
    let currentCol = 0;
    const rowGrid = [];
    
    cells.forEach(cell => {
      const colspan = parseInt(cell.getAttribute('colspan')) || 1;
      // 存储单元格的网格信息
      const cellInfo = {
        element: cell,
        row: rowIndex,
        startCol: currentCol,
        endCol: currentCol + colspan - 1
      };
      
      // 为单元格覆盖的每一列都建立映射
      for (let i = currentCol; i <= currentCol + colspan - 1; i++) {
        rowGrid[i] = cellInfo;
      }
      
      currentCol += colspan;
      // 把网格信息存在单元格的dataset里，方便后续快速获取
      cell.dataset.gridRow = rowIndex;
      cell.dataset.gridStartCol = currentCol - colspan;
      cell.dataset.gridEndCol = currentCol - 1;
    });
    
    grid.push(rowGrid);
  });
  
  return grid;
}

// 方向键移动的处理逻辑
function handleKeyDown(e, tableGrid) {
  const validKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
  if (!validKeys.includes(e.key)) return;
  
  e.preventDefault();
  const activeCell = document.querySelector('.focused');
  if (!activeCell) return;
  
  // 获取当前单元格的网格坐标
  const row = parseInt(activeCell.dataset.gridRow);
  const startCol = parseInt(activeCell.dataset.gridStartCol);
  const endCol = parseInt(activeCell.dataset.gridEndCol);
  
  let targetRow = row;
  let targetCol = startCol;
  
  // 根据方向键计算目标网格坐标
  switch(e.key) {
    case 'ArrowUp':
      targetRow = Math.max(0, row - 1);
      break;
    case 'ArrowDown':
      targetRow = Math.min(tableGrid.length - 1, row + 1);
      break;
    case 'ArrowLeft':
      targetCol = Math.max(0, startCol - 1);
      break;
    case 'ArrowRight':
      targetCol = endCol + 1;
      // 处理向右移动超出当前行最大列的情况，自动跳到下一行开头
      if (targetCol >= tableGrid[row].length) {
        targetRow = Math.min(tableGrid.length - 1, row + 1);
        targetCol = 0;
      }
      break;
  }
  
  // 找到目标单元格并切换焦点
  const targetCellInfo = tableGrid[targetRow]?.[targetCol];
  if (targetCellInfo) {
    activeCell.classList.remove('focused');
    targetCellInfo.element.classList.add('focused');
    targetCellInfo.element.focus();
  }
}

// 初始化使用
const table = document.querySelector('table');
const grid = initTableGrid(table);
// 默认给第一个单元格添加焦点样式
const firstCell = table.querySelector('td, th');
if (firstCell) {
  firstCell.classList.add('focused');
}
// 绑定键盘事件
document.addEventListener('keydown', (e) => handleKeyDown(e, grid));

• 网格映射：遍历表格时，为每个合并单元格覆盖的所有列都建立映射，确保任何网格位置都能找到对应的真实单元格
• 方向键逻辑：
  • 上下移动：保持当前起始列坐标不变，直接切换到对应行的同列位置
  • 左右移动：基于当前单元格的起始/结束列计算目标列，自动跳过合并单元格占据的列空间
  • 边界处理：添加了行和列的边界判断，避免焦点移出表格范围

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