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