How to navigate through inputs that are in a table with arrow keys?

Question

I am building a table using dataTables.net and dynamically created data (using dataTables.net is probably not relevant). A few of my table cells are inputs. How do I navigate through these inputs with the arrow keys? Thanks in advance

Answer 1

Gave all of my inputs the same attributes and added an event listener to them.

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