如何用JavaScript实现键盘上下箭头导航表格行（非jQuery方案）

我完全理解你找不到清晰方案的困扰，这就给你一个纯JS的实现，不需要依赖任何框架，直接就能用在你的pokemons-list表格上：

实现思路 #

核心就是监听键盘的上下箭头事件，维护当前选中的行索引，切换行的高亮样式，同时处理索引的边界（不能超出表格行的范围）。另外为了让行能正确获得焦点，我们需要给可导航的行添加tabindex属性。

完整代码示例 #

1. 补全后的表格结构（适配你的场景） #

<table id="pokemons-list">
  <thead>
    <tr>
      <th>NO</th>
      <th>名称</th>
      <th>属性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>妙蛙种子</td>
      <td>草/毒</td>
    </tr>
    <tr>
      <td>002</td>
      <td>妙蛙草</td>
      <td>草/毒</td>
    </tr>
    <tr>
      <td>003</td>
      <td>妙蛙花</td>
      <td>草/毒</td>
    </tr>
    <!-- 这里是你通过PHP生成的更多表格行 -->
  </tbody>
</table>

2. 高亮样式定义 #

/* 选中行的高亮背景色，可根据你的需求调整 */
.pokemon-row-selected {
  background-color: #e3f2fd;
  outline: none; /* 去掉默认焦点边框，可选 */
}

3. 核心JavaScript逻辑 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取目标表格和tbody内的所有数据行（跳过表头行）
  const table = document.getElementById('pokemons-list');
  const rows = table.querySelectorAll('tbody tr');
  let currentIndex = -1; // 初始状态无选中行

  // 给每一行添加tabindex，让行可以获得焦点
  rows.forEach(row => {
    row.setAttribute('tabindex', '0');
    // 支持点击行选中，提升交互体验
    row.addEventListener('click', function() {
      selectRow(Array.from(rows).indexOf(this));
    });
  });

  // 监听全局键盘事件，仅当表格内元素聚焦时响应
  document.addEventListener('keydown', function(e) {
    const isTableFocused = document.activeElement.closest('#pokemons-list');
    if (!isTableFocused) return;

    switch(e.key) {
      case 'ArrowUp':
        e.preventDefault(); // 阻止页面默认滚动行为
        if (currentIndex > 0) {
          selectRow(currentIndex - 1);
        }
        break;
      case 'ArrowDown':
        e.preventDefault();
        if (currentIndex < rows.length - 1) {
          selectRow(currentIndex + 1);
        }
        break;
    }
  });

  // 统一处理行选中逻辑的函数
  function selectRow(index) {
    // 移除上一行的选中样式
    if (currentIndex !== -1) {
      rows[currentIndex].classList.remove('pokemon-row-selected');
    }
    // 更新选中索引并设置新样式
    currentIndex = index;
    rows[currentIndex].classList.add('pokemon-row-selected');
    rows[currentIndex].focus(); // 让当前行获得焦点

    // 可选：长表格自动滚动到选中行
    rows[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  // 可选：页面加载完成后默认选中第一行
  // selectRow(0);
});

关键细节说明 #

• 行焦点处理：给tbody tr添加tabindex="0"，让原本无法获得焦点的行元素支持聚焦，符合Web无障碍交互标准。
• 边界校验：处理上下箭头时，确保索引不会超出有效范围，避免出现JS报错。
• 事件范围限制：仅当表格内元素被聚焦时才响应键盘事件，不会干扰页面其他区域的键盘交互。
• 可选功能：点击选中、平滑滚动都是可按需开启/关闭的功能，你可以根据自己的场景调整。

把这些代码对应加到你的页面里，就能实现按下上下箭头导航表格行并高亮的功能了！

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