方向键在表格单元格间跳转失效时，需手动拦截keydown事件并控制焦点流向：监听<table>的keydown，用e.target.closest('td,th')获取当前单元格，通过rowIndex和cellIndex计算行列，边界检查后聚焦目标单元格内首个可聚焦子元素或设contenteditable后聚焦。
方向键在表格单元格间跳转失效，怎么办？
默认情况下，<table> 中的 <input> 或 <textarea> 单元格不会自动响应方向键切换焦点——浏览器把方向键留给滚动或文本光标移动了。必须手动拦截 keydown 事件并控制焦点流向。
关键点在于：只对可编辑单元格（如含 contenteditable 或聚焦态 <input>）响应方向键；其他单元格不干预，避免干扰页面滚动。
- 监听整个
<table>的keydown，而非每个单元格单独绑定，减少事件监听器数量 - 用
e.preventDefault()阻止默认行为（比如输入框内光标左右移动），但仅在方向键被用于导航时才调用 - 通过
e.target获取当前聚焦元素，再用closest('td, th')定位所在单元格，进而计算行列索引
如何准确获取当前单元格的行、列位置？
靠 rowIndex 和 cellIndex 最直接，但前提是目标元素必须是 <td> 或 <th> 本身。如果焦点在单元格内的 <input> 上，就得先往上找最近的 <td>。
别用 querySelectorAll('tr td') 全局索引——表格有合并单元格（colspan/rowspan）时会错位。原生 DOM 属性才是可靠依据。
立即学习“前端免费学习笔记（深入）”；
-
target.closest('td, th')?.cellIndex获取列号，target.closest('td, th')?.parentElement?.rowIndex获取行号 - 注意
parentElement可能是<tbody>或<thead>，但rowIndex是相对于整个<table>的，无需额外处理 - 若当前单元格是
<th>且位于表头，仍可用相同逻辑，rowIndex和cellIndex同样有效
上下左右键对应的目标单元格怎么算？
行号加减对应上下，列号加减对应左右，但必须做边界检查——不能让焦点跳到不存在的单元格，也不能跳进 <th> 区域（除非你明确允许）。
常见错误是只判断 rowIndex 是否越界，却忽略某一行实际列数可能不同（比如最后一行有 colspan=2 的单元格）。稳妥做法是：先取目标行 rows[row]，再访问其 cells[col]，用是否为 undefined 判断是否存在。
- 右移：列号 +1，检查
table.rows[row].cells[col + 1]是否存在 - 左移：列号 -1，确保
col - 1 >= 0，再确认table.rows[row].cells[col - 1] - 下移：行号 +1，检查
table.rows[row + 1]?.cells[col]是否存在（注意?.cells避免报错） - 上移：行号 -1，同样先判
row - 1 >= 0，再取cells[col]
聚焦目标单元格时，怎么让输入框自动获得焦点？
目标单元格可能是纯文本（contenteditable="true"）或含 <input>。统一策略是：优先聚焦内部第一个可聚焦子元素；没有则聚焦单元格自身并设置 contenteditable。
别直接调 cell.focus()——<td> 默认不可聚焦，需提前设 tabindex="0"，否则无效。
- 给所有参与导航的
<td>加tabindex="-1"（不进 Tab 键顺序，但可脚本聚焦） - 聚焦前先检查
cell.querySelector('input, textarea, [contenteditable]')，存在则调.focus()，否则调cell.focus()并确保cell.contentEditable = 'true' - 对
<input>要额外调select()或setSelectionRange(0, 0)，把光标放到开头，提升操作一致性
方向键导航看似简单，真正麻烦的是合并单元格、动态增删行、以及焦点在不同编辑控件（input / contenteditable / select）间切换时的行为统一——这些细节不处理，用户一按方向键就“消失”或“卡住”。
