jquery - 使用箭头键导航 HTML 表格

Question

我使用 HTML 表格创建了一个非常基本的电子表格。它工作完美，除了用户必须使用鼠标单击每个 <td>为了编辑它。我正在使用 jQuery 捕获点击事件并显示一个对话框来编辑它。我希望用户能够使用箭头键导航到每个单元格，单元格 css 背景更改以指示焦点，然后单击 Enter 键将触发 jQuery 对话框事件。我正在使用 jQuery 1.9。

这是一个jsfiddle基本上我所拥有的。

如何保存当前选定的单元格，以便当您用鼠标单击一个单元格，然后使用箭头键时，它将从“当前”单元格开始导航？

谢谢。

Answer 1

下面是一个普通的 JavaScript 解决方案，它使用 onkeydown 事件并使用 previousElementSibling 和 nextElementSibling 属性。

https://jsfiddle.net/rh5aoxsL/

使用 tabindex 的问题是您无法像在 Excel 中那样导航，并且您可以离开电子表格本身导航。

HTML

<table>
  <tbody>
    <tr>
      <td id='start'>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  border: 1px solid black;
}
table td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

JavaScript

var start = document.getElementById('start');
start.focus();
start.style.backgroundColor = 'green';
start.style.color = 'white';

function dotheneedful(sibling) {
  if (sibling != null) {
    start.focus();
    start.style.backgroundColor = '';
    start.style.color = '';
    sibling.focus();
    sibling.style.backgroundColor = 'green';
    sibling.style.color = 'white';
    start = sibling;
  }
}

document.onkeydown = checkKey;

function checkKey(e) {
  e = e || window.event;
  if (e.keyCode == '38') {
    // up arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.previousElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '40') {
    // down arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.nextElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '37') {
    // left arrow
    var sibling = start.previousElementSibling;
    dotheneedful(sibling);
  } else if (e.keyCode == '39') {
    // right arrow
    var sibling = start.nextElementSibling;
    dotheneedful(sibling);
  }
}