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: 请实现按键控制 // 储存目标单元格 let currentTd = document.querySelector('.current'); // 获取整个列表的行和列的数量 let row = document.querySelector('tbody').querySelectorAll('tr'); let column = currentTd.parentNode.querySelectorAll('td'); // 获取单元格当前的行和列 let currentColumn = (function () { for (let i = 0; i < column.length; i++) { if (column[i] == currentTd) { return i; } } }()) let currentRow = (function () { for (let i = 0; i < row.length; i++) { if (row[i] == currentTd.parentNode) { return i; } } }()) // 定义函数---对 目标单元格 高亮显示 function highLight(targetElement) { for (let i = 0; i < column.length; i++) { column[i].classList.toggle('current', false); } targetElement.classList.add('current'); } switch (Number(code)) { // 左移 case 37: if (currentTd.previousElementSibling) { currentColumn--; } else { currentColumn = column.length - 1; } currentTd = column[currentColumn]; highLight(currentTd); break; // 上移 case 38: if (currentTd.parentNode.previousElementSibling) { currentRow--; } else { currentRow = row.length - 1; } currentTd = row[currentRow].children[currentColumn]; highLight(currentTd); break; // 右移 case 39: if (currentTd.nextElementSibling) { currentColumn++; } else { currentColumn = 0; } currentTd = column[currentColumn]; highLight(currentTd); break; // 下移 case 40: if (currentTd.parentNode.nextElementSibling) { currentRow++; } else { currentRow = 0; } currentTd = row[currentRow].children[currentColumn]; highLight(currentTd) break; default: alert('抱歉,程序由于某些未知的错误,不能正确地运行!'); break; } }; }
提供一个思路
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 currentTd = document.querySelector('.current');
// 获取整个列表的行和列的数量
let row = document.querySelector('tbody').querySelectorAll('tr');
let column = currentTd.parentNode.querySelectorAll('td');
// 获取单元格当前的行和列
let currentColumn = (function () {
for (let i = 0; i < column.length; i++) {
if (column[i] == currentTd) {
return i;
}
}
}())
let currentRow = (function () {
for (let i = 0; i < row.length; i++) {
if (row[i] == currentTd.parentNode) {
return i;
}
}
}())
// 定义函数---对 目标单元格 高亮显示
function highLight(targetElement) {
for (let i = 0; i < column.length; i++) {
column[i].classList.toggle('current', false);
}
targetElement.classList.add('current');
}
switch (Number(code)) {
// 左移
case 37:
if (currentTd.previousElementSibling) {
currentColumn--;
} else {
currentColumn = column.length - 1;
}
currentTd = column[currentColumn];
highLight(currentTd);
break;
// 上移
case 38:
if (currentTd.parentNode.previousElementSibling) {
currentRow--;
} else {
currentRow = row.length - 1;
}
currentTd = row[currentRow].children[currentColumn];
highLight(currentTd);
break;
// 右移
case 39:
if (currentTd.nextElementSibling) {
currentColumn++;
} else {
currentColumn = 0;
}
currentTd = column[currentColumn];
highLight(currentTd);
break;
// 下移
case 40:
if (currentTd.parentNode.nextElementSibling) {
currentRow++;
} else {
currentRow = 0;
}
currentTd = row[currentRow].children[currentColumn];
highLight(currentTd)
break;
default:
alert('抱歉,程序由于某些未知的错误,不能正确地运行!');
break;
}
};
}