Javascript-форум - Перемещение стрелками по полям формы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Перемещение стрелками по полям формы (https://javascript.ru/forum/dom-window/21465-peremeshhenie-strelkami-po-polyam-formy.html)

Перемещение стрелками по полям формы

Есть большая таблица, где ячейками являются input'ы. Нужно сделать, чтобы по этим инпутам можно было перемещаться стрелками, как в экселе.
Таблица упрощенно такая:

<table>
<tr><td><input id=price19></td><td><input id=quantity19></td><td><input id=size19></td></tr>
<tr><td><input id=price540></td><td><input id=quantity540></td><td><input id=size540></td></tr>
<tr><td><input id=price7></td><td><input id=quantity7></td><td><input id=size7></td></tr>
<tr><td><input id=price192></td><td><input id=quantity192></td><td><input id=size192></td></tr>
<tr><td><input id=price37></td><td><input id=quantity37></td><td><input id=size37></td></tr>
</table>

Всем инпутам прописаны id, по ним идет адресация для различных скриптов. Эти id образуются просто из обозначения по-смыслу + номер товара. Например, количество для 19 товара будет id="quantity19". То есть, в каждой колонке у инпута название образуется из заданного + номер. Номера товаров по строкам идут не по порядку, конечно.
Как я понимаю, для реализации навигации стрелками надо сделать массивы из возможных названий (смысловых) и номеров, встречающихся в id, и по ним смотреть куда передавать фокус.
Например, для вышеприведенной таблица массивы такие:

Код:

var list_id = new Array (price, quantity, size);       

var list_id = new Array (19, 540, 7, 192, 37);

Стрелочками влево-вправо - перемещаемся по верхнему массиву. Стрелочками вверх-вниз - по нижнему.
Подскажите, как это реализовать?

<table>
<tr><td><input id=price19></td><td><input id=quantity19></td><td><input id=size19></td></tr>
<tr><td><input id=price540></td><td><input id=quantity540></td><td><input id=size540></td></tr>
<tr><td><input id=price7></td><td><input id=quantity7></td><td><input id=size7></td></tr>
<tr><td><input id=price192></td><td><input id=quantity192></td><td><input id=size192></td></tr>
<tr><td><input id=price37></td><td><input id=quantity37></td><td><input id=size37></td></tr>
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$('table input').keydown(function(e) {
    var td;
    switch (e.keyCode) {
      case 39: // right
        td = $(this).parent('td').next();
        break;
      
      case 37: // left
        td = $(this).parent('td').prev();
        break;
        
      case 40: // down
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').next().find('td:nth-child(' + i + ')');
        break;
        
      case 38: // up
        var i = $(this).parent().index() + 1;
        td = $(this).closest('tr').prev().find('td:nth-child(' + i + ')');
        break;
    }
    td.find('input').focus();
  });
</script>

Немного неправильно выразился по коду таблицы. В одной ячейке может быть несколько input'ов с разными именами. Предыдущее решение на это не рассчитано.