Есть такой сильно упрощенный код
var array = [1,2,3,4,5,6,7,8,9,10];
var num = 0;
var html = "";
array.forEach(function(item){
html += '<div class="card" id="index-' + item + '">' + item + '</div>'
})
document.querySelector(".wrap").innerHTML = html;
document.addEventListener('keydown', function(event) {
if (event.key == "ArrowRight" && num < array.length - 1) {
num++;
} else if(event.key == "ArrowLeft" && num > 0 ){
num--;
}
document.querySelectorAll(".card").forEach(function(item){
item.classList.remove('active');
});
document.querySelector("#index-" + array[num]).classList.add('active');
});
https://jsfiddle.net/xw9znqo5/
На его основе отрендерены элементы, Количество колонок и рядов может быть произвольным. Мне нужно сделать что то типа курсора, нужно добавить активный css класс текущей ячейке (текущему элементу массива). Клавишами лево / право я двигаюсь по масиву в начало и конец массива соответственно. И добавляю класс .active текущей ячейке. Тут все понятно.
Непонятно становится с клавишами вверх / вниз. Если нужно перейти с верхнего ряда на нижний