jquery – 使用箭头键导航HTML表

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

这里基本上是我的jsfiddle.

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

谢谢.

解决方法

下面是一个使用onkeydown事件并使用prevIoUsElementSibling和nextElementSibling属性的vanilla JavaScript解决方案.

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);
  }
}

jquery – 使用箭头键导航HTML表

解决方法

猜你在找的jQuery相关文章