Блог

Я создаю таблицу, используя dataTables.net и динамически создаваемые данные (с использованием dataTables.net вероятно, это не имеет значения). Несколько ячеек моей таблицы являются входными данными. Как мне перемещаться по этим входным данным с помощью клавиш со стрелками? Заранее спасибо

Дал всем моим входным данным одинаковые атрибуты и добавил к ним прослушиватель событий.

 document.querySelectorAll('input[data-type="Ordered"]').forEach(el => {
        el.addEventListener('keydown', (e) => {
            upDownFocusInputs(e, el)
        })
    })



function upDownFocusInputs(e, el) {
    let controlType = el.dataset.type;

    if (e.keyCode == 40) { // down arrow
        e.preventDefault();
        let nextRow = el.closest('tr').nextSibling;

        if (nextRow) {
            let nextInput = nextRow.querySelector(`input[data-type=${controlType}]`)
            nextInput.focus();
        }
    }
    else if (e.keyCode == 38) { // up arrow
        e.preventDefault();
        let prevRow = el.closest('tr').previousElementSibling;

        if (prevRow) {
            let prevInput = prevRow.querySelector(`input[data-type=${controlType}]`)
            prevInput.focus();
        }
    }
}