如何使用箭头键浏览表格中的输入？

Question

我正在使用 dataTables.net 和动态创建的数据构建一个表（使用 dataTables.net 可能不相关）。 我的一些表格单元格是输入。 如何使用箭头键浏览这些输入？ 提前致谢

Answer 1

为我的所有输入提供相同的属性，并向它们添加一个事件侦听器。

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