Utilisez les touches fléchées pour naviguer dans un tableau HTML

Ci-dessous est à la vanille, JavaScript solution à l'aide de la onkeydown de l'événement et à l'aide de la previousElementSibling et nextElementSibling propriétés.

https://jsfiddle.net/rh5aoxsL/

Le problème avec l'aide de tabindex est que vous ne soyez pas à naviguer de la manière que vous le feriez dans Excel et vous pouvez naviguer loin de la feuille de calcul elle-même.

Le code 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>

Le CSS

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

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

OriginalL'auteur huehuehue

Pour la touche flèche en se concentrant, j'ai fini regroupant un tas de différentes solutions posté ici et est venu avec cette. Toujours pas sûr de savoir pourquoi .next(), ou .prev() ne fonctionne pas pour les lignes... semblait avoir besoin .prevAll et .nextAll pour une raison:

   $("input").keydown(function (e) {
var textInput = this;
var val = textInput.value;
var isAtStart = false, isAtEnd = false;
var cellindex = $(this).parents('td').index();
if (typeof textInput.selectionStart == "number") {
//Non-IE browsers
isAtStart = (textInput.selectionStart == 0);
isAtEnd = (textInput.selectionEnd == val.length);
} else if (document.selection && document.selection.createRange) {
//IE <= 8 branch
textInput.focus();
var selRange = document.selection.createRange();
var inputRange = textInput.createTextRange();
var inputSelRange = inputRange.duplicate();
inputSelRange.moveToBookmark(selRange.getBookmark());
isAtStart = inputSelRange.compareEndPoints("StartToStart", inputRange) == 0;
isAtEnd = inputSelRange.compareEndPoints("EndToEnd", inputRange) == 0;
}
//workaround for text inputs of 'number' not working in Chrome... selectionStart/End is null.  Can no longer move cursor left or right inside this field.
if (textInput.selectionStart == null) {
if (e.which == 37 || e.which == 39) {
isAtStart = true;
isAtEnd = true;
}
}
if (e.which == 37) {
if (isAtStart) {
$(this).closest('td').prevAll('td').find("input").focus();
}
}
if (e.which == 39) {
if (isAtEnd) {
$(this).closest('td').nextAll('td').find("input").not(":hidden").first().focus();
}
}
if (e.which == 40) {
$(e.target).closest('tr').nextAll('tr').find('td').eq(cellindex).find(':text').focus();
}
if (e.which == 38) {
$(e.target).closest('tr').prevAll('tr').first().find('td').eq(cellindex).find(':text').focus();
}
});

OriginalL'auteur pcalkins