题解 | #移动控制#

function bind() {
        let trList = document.querySelectorAll("tr");
        Array.from(trList).forEach((tr, trIdx) => {
          Array.from(tr.children).forEach((td, tdIdx) => {
            td.setAttribute("data-coord", `${trIdx},${tdIdx}`);
          });
        });
        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 curPoint = document.querySelector(".current");
          let curCoord = curPoint.dataset.coord.split(",");
          let curTr = curPoint.parentNode;
          let tdMax = curTr.children.length;
          let trMax = curTr.parentNode.children.length;
          curPoint.classList.remove("current");
          if (code === 37) {
            //左
            curTr.children[
              curCoord[1] == 0 ? tdMax - 1 : Number(curCoord[1]) - 1
            ].classList.add("current");
          }
          if (code === 38) {
            //上
            curTr.parentNode.children[
              curCoord[0] == 0 ? trMax - 1 : Number(curCoord[0]) - 1
            ].children[curCoord[1]].classList.add("current");
          }
          if (code === 39) {
            //右
            curTr.children[
              curCoord[1] == tdMax - 1 ? 0 : Number(curCoord[1]) + 1
            ].classList.add("current");
          }
          if (code === 40) {
            //下
            curTr.parentNode.children[
              curCoord[0] == trMax - 1 ? 0 : Number(curCoord[0]) + 1
            ].children[curCoord[1]].classList.add("current");
          }
        };
      }

第一次写这种类型的题,写完看了下讨论区,发现对dom操作和坐标相关理解还是不够深刻

我的思路是先给表格初始化自定义属性 给每个td添加坐标 然后操作 主要是怎么把xy对应到dom操作不是很熟练 写的复杂了些