[РЕШЕНО] Использовать клавиши со стрелками для перемещения по таблице HTML.

[ara05ru]

Помогите новичку в js. Нашел вот такой код для использования стрелок клавиатуры для перемещения по таблице HTML. Только проблема в том, что начальная ячейка для перемещения начинается всегда с одной и той же. А нужно чтоб начиналось с той, которую кликнул.

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

table {
  border-collapse: collapse;
  border: 1px solid black;
}

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

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

[Naive]

https://jsfiddle.net/pe3fodz5/
убрал установку старта из начала
добавил проверок в код на случай если старт не существует
добавил лиснер на клик и установку старта в нем

если интересно разобраться, то я заюзал spread|rest оператор (...), 2 стрелочные функции (() => {}), остальное гуглится по названию

[ara05ru]

Спасибо большое. То что нужно.