题解 | #移动控制#

function bind() {
    var jsContainer = document.getElementById('jsContainer');
    var jsLayout = jsContainer.getElementsByTagName('tbody')[0];
    var trs = Array.from(jsLayout.children);
    var rows = trs.length;
    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 cur = jsLayout.getElementsByClassName('current')[0];
        var curp = cur.parentElement;
        var cur_row = 0;
        // 在几行
        for (var j=0;j<rows;j++) {
            if (curp === trs[j]) {
                cur_row = j;
                break;
            }
        }
        // 几列
        var curp_child = Array.from(curp.children);
        var curp_child_len = curp_child.length;// 共几列
        var cur_col = 0;//几列
        for (var i=0;i<curp_child_len;i++) {
            if (cur === curp_child[i]) {
                cur_col = i;
                break;
            }
        }

        if (code == 37) {
            // 左
            cur_col -= 1;
        } else if (code == 38) {
            // 上
            cur_row -= 1;
        } else if (code == 39) {
            // 右
            cur_col += 1;
        } else if (code == 40) {
            // 下
            cur_row += 1;
        }
        cur_col = cur_col < 0 ? curp_child_len - 1 : cur_col;
        cur_row = cur_row < 0 ? rows - 1 : cur_row;
        cur_col = cur_col >= curp_child_len ? 0 : cur_col;
        cur_row = cur_row >= rows ? 0 : cur_row;

        cur.classList.remove('current');
        trs[cur_row].children[cur_col].classList.add('current');
    };
}