题解 | JS87 移动控制

function bind() {

    let con = document.getElementById('jsContainer');
    let rows = con.querySelectorAll('tr');
    let cols = rows[0].querySelectorAll('td');
    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 cur = con.querySelector('.current');
        let h = 0, l = 0;
        Array.from(rows).map((item, index) => {
            if (item.contains(cur)) {
                h = index;
                Array.from(item.querySelectorAll("td")).map((td, i) => {
                    if (td == cur) {
                        l = i;
                    }
                })
            }
        })
        // 上
        if (code == 38) {
            if (h == 0) {
                h = rows.length - 1;
            } else {
                h--;
            }
        }
        // 下
        if (code == 40) {
            if (h == rows.length - 1) {
                h = 0;
            } else {
                h++;
            }
        }
        // 左
        if (code == 37) {
            if (l == 0) {
                l = cols.length - 1;
            } else {
                l--;
            }
        }
        // 右
        if (code == 39) {
            if (l == cols.length - 1) {
                l = 0;
            } else {
                l++;
            }
        }
        cur.classList.remove("current");
        rows[h].querySelectorAll("td")[l].classList.add("current");
        console.log("h:", h, ",l", l);
    };
}