如何为标准HTML Table扩展方法与键盘事件？

完全可以给标准HTML Table扩展这类按键操作功能，核心是通过JavaScript绑定键盘事件并编写对应的处理逻辑，甚至可以给表格扩展专属方法来复用功能。

实现思路 #

• 绑定键盘事件监听：给表格或全局文档绑定keydown事件，通过event.key判断按键类型，执行对应导航逻辑。
• 实现按键导航逻辑：针对上下左右、PageUp/PageDown、Home/End等按键，编写切换选中单元格、跳转行的具体逻辑，同时维护当前选中单元格的状态。
• 扩展表格专属方法（可选）：通过扩展HTMLTableElement原型，给所有表格添加通用方法，比如setActiveCell、navigateToTop等，方便跨表格复用功能。

示例代码 #

// 给HTMLTableElement扩展键盘导航初始化方法
HTMLTableElement.prototype.initKeyboardNav = function() {
  let activeCell = null;
  const table = this;

  // 初始化选中第一个单元格
  const firstRow = table.querySelector('tr');
  if (firstRow) activeCell = firstRow.querySelector('td, th');
  activeCell?.classList.add('active');

  // 绑定全局键盘事件
  document.addEventListener('keydown', (e) => {
    if (!activeCell) return;

    switch(e.key) {
      case 'ArrowUp':
        navigateUp();
        break;
      case 'ArrowDown':
        navigateDown();
        break;
      case 'ArrowLeft':
        navigateLeft();
        break;
      case 'ArrowRight':
        navigateRight();
        break;
      case 'PageUp':
        navigatePageUp();
        break;
      case 'PageDown':
        navigatePageDown();
        break;
      case 'Home':
        navigateToTop();
        break;
      case 'End':
        navigateToBottom();
        break;
    }
  });

  // 上下左右导航逻辑
  function navigateUp() {
    const prevRow = activeCell.parentElement.previousElementSibling;
    if (prevRow) updateActiveCell(prevRow.children[activeCell.cellIndex]);
  }

  function navigateDown() {
    const nextRow = activeCell.parentElement.nextElementSibling;
    if (nextRow) updateActiveCell(nextRow.children[activeCell.cellIndex]);
  }

  function navigateLeft() {
    const prevCell = activeCell.previousElementSibling;
    if (prevCell) updateActiveCell(prevCell);
  }

  function navigateRight() {
    const nextCell = activeCell.nextElementSibling;
    if (nextCell) updateActiveCell(nextCell);
  }

  // 翻页与首尾跳转逻辑
  function navigatePageUp() {
    let targetRow = activeCell.parentElement;
    // 一次跳5行，可自定义行数
    for (let i = 0; i < 5; i++) {
      if (!targetRow.previousElementSibling) break;
      targetRow = targetRow.previousElementSibling;
    }
    updateActiveCell(targetRow.children[activeCell.cellIndex]);
  }

  function navigatePageDown() {
    let targetRow = activeCell.parentElement;
    for (let i = 0; i < 5; i++) {
      if (!targetRow.nextElementSibling) break;
      targetRow = targetRow.nextElementSibling;
    }
    updateActiveCell(targetRow.children[activeCell.cellIndex]);
  }

  function navigateToTop() {
    const firstRow = table.querySelector('tr');
    updateActiveCell(firstRow.children[activeCell.cellIndex]);
  }

  function navigateToBottom() {
    const rows = table.querySelectorAll('tr');
    const lastRow = rows[rows.length - 1];
    updateActiveCell(lastRow.children[activeCell.cellIndex]);
  }

  // 更新选中单元格样式与状态
  function updateActiveCell(cell) {
    activeCell.classList.remove('active');
    activeCell = cell;
    activeCell.classList.add('active');
    // 自动滚动到可视区域
    activeCell.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }
};

// 使用示例：给指定表格初始化键盘导航
const myTable = document.getElementById('my-table');
myTable.initKeyboardNav();

/* 选中单元格的高亮样式 */
td.active, th.active {
  background-color: #cce5ff;
  outline: 2px solid #007bff;
}

注意事项 #

• 若表格存在动态加载行或分页逻辑，需在数据更新后重新初始化导航状态。
• 可通过event.preventDefault()阻止按键默认行为（比如PageDown默认滚动页面），避免与页面原有逻辑冲突。
• 多表格场景下，建议在事件处理中判断当前焦点是否在目标表格内，防止不同表格的导航逻辑互相干扰。

内容的提问来源于stack exchange，提问作者Antonio Linares Cañas