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操作不是很熟练 写的复杂了些