html给表格单元格添加左右箭头键的js代码

在HTML中，你可以结合JavaScript来实现表格单元格的上下左右箭头导航。以下是一个基本的例子，它假设你有一个表格，每个单元格都有一个唯一的id，并且你想通过键盘事件触发箭头操作：

<table id="myTable">
  <tr>
    <td id="cell1">Cell 1</td>
    <td id="cell2">Cell 2</td>
  </tr>
</table>

<div id="arrowKeys">
  <button onclick="moveLeft('cell1')">左</button>
  <button onclick="moveRight('cell1')">右</button>
  <button onclick="moveUp('cell1')">上</button>
  <button onclick="moveDown('cell1')">下</button>
</div>

<script>
function move(direction, cellId) {
  const cell = document.getElementById(cellId);
  const nextCellId = getNextCellId(cellId, direction);

  if (nextCellId) {
    cell.innerHTML = "Moving...";
    setTimeout(() => {
      const nextCell = document.getElementById(nextCellId);
      nextCell.focus();
      cell.innerHTML = nextCell.innerText;
    }, 500); // 暂停500毫秒模拟动画效果
  }
}

function getNextCellId(currentId, direction) {
  switch (direction) {
    case 'left':
      return currentId === 'cell1' ? null : currentId.replace(/([a-z]+)(\d+)$/, "$1" + ($1 === 'cell' ? '' : '-') + parseInt($2) - 1);
    case 'right':
      return currentId === 'cell2' ? null : currentId.replace(/([a-z]+)(\d+)$/, "$1" + ($1 === 'cell' ? '' : '-') + parseInt($2) + 1);
    case 'up':
      return currentId.replace(/\d+$/i, (parseInt($0) - 1).toString());
    case 'down':
      return currentId.replace(/\d+$/i, (parseInt($0) + 1).toString());
    default:
      return null;
  }
}
</script>

在这个例子中，`move`函数会根据方向和当前单元格ID找到下一个单元格，然后将焦点移动到那个单元格上。注意这只是一个基础示例，实际应用可能需要处理更复杂的情况，例如循环滚动、禁用不可访问的相邻单元格等。