题解 | #移动控制#

    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: 请实现按键控制
            var tr = document.querySelectorAll('tr');
            var mL = document.querySelectorAll('tr').length;
            var td = document.querySelectorAll('tr:first-of-type td');
            var nL = document.querySelectorAll('tr:first-of-type td').length;

            var tdAll = document.querySelectorAll('td');
            var temp;
            for (var i = 0; i < tdAll.length; i++) {
                if (tdAll[i].className == 'current') {
                    temp = i;//记录当前选中元素的下标
                    tdAll[i].className = '';//去除当前选中元素的样式
                    break;
                }
            }
            var row = parseInt(temp / mL); //根据下标确定当前选中的td在第几行
            var col = temp % nL; //根据下标确定当前选中的td在第几列
            //根据按键操作以及所处位置，切换高亮节点
            if (code == '37') {//左
            //td:nth-of-type()第一个元素从1开始，所以不能直接用行列的值计算
                if (col == '0') {//如果在第一列往左移动则到达最后一列
                    tr[row].querySelector('td:nth-of-type('+ Number(nL) +')').className = 'current'
                } else {//否则行不变，列-1
                    tr[row].querySelector('td:nth-of-type('+ Number(col) +')').className = 'current'
                }
            } else if(code == '39') {//右
                if (col == nL - 1) {//如果在最后一列往右移动则到达第一列
                    tr[row].querySelector('td:nth-of-type(1)').className = 'current'
                } else {//否则行不变，列＋1
                    tr[row].querySelector('td:nth-of-type('+ Number(col+2) +')').className = 'current'
                }
            } else if(code == '38') {//上
                if (row == '0') {//如果在第一行往上移动则到达最后一行
                    tr[mL-1].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'
                } else {//否则列不变，行-1
                    tr[row-1].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'
                }
            } else if(code == '40') {//下
                if (row == mL - 1) {//如果在最后一行往下移动则到达第一行
                    tr[0].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'
                } else {//否则列不变，行+1
                    tr[row+1].querySelector('td:nth-of-type('+ Number(col+1) +')').className = 'current'
                }
            }
        };
    }