题解 | #移动控制#

    function bind() {

        document.onkeydown = event => {
            if (!event) return;
            var code = event.keyCode || '';
            // 如果用户按下的键不是 ↑ ↓ ← → 键，则函数中断
            if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;
            event.preventDefault && event.preventDefault();
            //TODO: 请实现按键控制

            // 储存目标单元格
            let currentTd = document.querySelector('.current');

            // 获取整个列表的行和列的数量
            let row = document.querySelector('tbody').querySelectorAll('tr');
            let column = currentTd.parentNode.querySelectorAll('td');

            // 获取单元格当前的行和列
            let currentColumn = (function () {
                for (let i = 0; i < column.length; i++) {
                    if (column[i] == currentTd) {
                        return i;
                    }
                }
            }())
            let currentRow = (function () {
                for (let i = 0; i < row.length; i++) {
                    if (row[i] == currentTd.parentNode) {
                        return i;
                    }
                }
            }())


            // 定义函数---对 目标单元格 高亮显示
            function highLight(targetElement) {
                for (let i = 0; i < column.length; i++) {
                    column[i].classList.toggle('current', false);
                }
                targetElement.classList.add('current');
            }


            switch (Number(code)) {
                // 左移
                case 37:
                    if (currentTd.previousElementSibling) {
                        currentColumn--;
                    } else {
                        currentColumn = column.length - 1;
                    }
                    currentTd = column[currentColumn];
                    highLight(currentTd);
                    break;

                // 上移
                case 38:
                    if (currentTd.parentNode.previousElementSibling) {
                        currentRow--;
                    } else {
                        currentRow = row.length - 1;
                    }
                    currentTd = row[currentRow].children[currentColumn];
                    highLight(currentTd);
                    break;

                // 右移
                case 39:
                    if (currentTd.nextElementSibling) {
                        currentColumn++;
                    } else {
                        currentColumn = 0;
                    }
                    currentTd = column[currentColumn];
                    highLight(currentTd);
                    break;

                // 下移
                case 40:
                    if (currentTd.parentNode.nextElementSibling) {
                        currentRow++;
                    } else {
                        currentRow = 0;
                    }
                    currentTd = row[currentRow].children[currentColumn];
                    highLight(currentTd)
                    break;

                default:
                    alert('抱歉，程序由于某些未知的错误，不能正确地运行！');
                    break;
            }

        };
    }

提供一个思路

            document.onkeydown = event => {

                if (!event) return;

                var code = event.keyCode || '';

                // 如果用户按下的键不是 ↑ ↓ ← → 键，则函数中断

                if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;

                event.preventDefault && event.preventDefault();

                //TODO: 请实现按键控制

                // 储存目标单元格

                let currentTd = document.querySelector('.current');

                // 获取整个列表的行和列的数量

                let row = document.querySelector('tbody').querySelectorAll('tr');

                let column = currentTd.parentNode.querySelectorAll('td');

                // 获取单元格当前的行和列

                let currentColumn = (function () {

                    for (let i = 0; i < column.length; i++) {

                        if (column[i] == currentTd) {

                            return i;

                        }

                    }

                }())

                let currentRow = (function () {

                    for (let i = 0; i < row.length; i++) {

                        if (row[i] == currentTd.parentNode) {

                            return i;

                        }

                    }

                }())

                // 定义函数---对 目标单元格 高亮显示

                function highLight(targetElement) {

                    for (let i = 0; i < column.length; i++) {

                        column[i].classList.toggle('current', false);

                    }

                    targetElement.classList.add('current');

                }

                switch (Number(code)) {

                    // 左移

                    case 37:

                        if (currentTd.previousElementSibling) {

                            currentColumn--;

                        } else {

                            currentColumn = column.length - 1;

                        }

                        currentTd = column[currentColumn];

                        highLight(currentTd);

                        break;

                    // 上移

                    case 38:

                        if (currentTd.parentNode.previousElementSibling) {

                            currentRow--;

                        } else {

                            currentRow = row.length - 1;

                        }

                        currentTd = row[currentRow].children[currentColumn];

                        highLight(currentTd);

                        break;

                    // 右移

                    case 39:

                        if (currentTd.nextElementSibling) {

                            currentColumn++;

                        } else {

                            currentColumn = 0;

                        }

                        currentTd = column[currentColumn];

                        highLight(currentTd);

                        break;

                    // 下移

                    case 40:

                        if (currentTd.parentNode.nextElementSibling) {

                            currentRow++;

                        } else {

                            currentRow = 0;

                        }

                        currentTd = row[currentRow].children[currentColumn];

                        highLight(currentTd)

                        break;

                    default:

                        alert('抱歉，程序由于某些未知的错误，不能正确地运行！');

                        break;

                }

            };

        }