//TODO: 请实现按键控制
let current_el = document.querySelector('.current');
let tbody_trs = document.querySelectorAll('tbody > tr')
// console.log(tbody_trs.length,tbody_trs[0].children.length)
let tbody_tds = tbody_trs[0].children.length;
let current_hang = 0;
let current_lie = 0;
let total_hang = tbody_trs.length;
let total_lie = tbody_tds;
tbody_trs.forEach((t, i) => {
[].slice.call(t.children).findIndex((m, n) => {
if (m === current_el) {
current_lie = n;
current_hang = i
};
})
})
console.log(current_hang,current_lie, '当前行列')
current_el.classList.remove('current');
if (code == '37') {
current_lie--;
if (current_lie < 0) {
current_lie = total_lie - 1
}
} else if (code == '38') {
current_hang--;
if (current_hang < 0) {
current_hang = total_hang - 1;
console.log(current_hang)
}
} else if (code == '39') {
current_lie++;
console.log( current_lie, total_lie, '@@@@@@@####')
if (current_lie > total_lie - 1) {
current_lie = 0
console.log(current_lie, '查看列')
}
} else {
current_hang++;
if (current_hang > total_hang -1) {
current_hang = 0
}
}
tbody_trs[current_hang].children[current_lie].classList.add('current') 
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 active = document.getElementsByClassName('current')[0]
let td = document.getElementsByTagName('td')
let num = 0
Array.from(td).forEach((item,index)=>{
if(item.className == 'current'){
num = index
}
})
let m = 9,n=9
// console.log(num);
active.className = ''
if(code == '37'){
let arr = []
for(let i=0;i<m*n;i++){
if(i%n == 0){
arr.push(i)
}
}
if(arr.indexOf(num) !== -1){
num = num + n - 1
}else{
num -= 1
}
}else if(code == '38'){
let arr = []
for(let i=0;i<n;i++){
arr.push(i)
}
if(arr.indexOf(num) !== -1){
num += (m-1) * n
}else{
num -= n
}
}else if(code == '39'){
let arr = []
for(let i=0;i<n*m;i++){
if(i%n == n-1){
arr.push(i)
}
}
if(arr.indexOf(num) !== -1){
num -= n-1
}else{
num += 1
}
}else if(code == '40'){
let arr = []
for(let i=(m-1)*n;i<m*n;i++){
arr.push(i)
}
if(arr.indexOf(num) !== -1){
num -= (m-1)*n
}else{
num += n
}
}
td[num].className = 'current'
};
} 
//本地跑能过 牛客上不行 实现是没问题的
function bind() {
let div = document.getElementById('jsContainer')
let tr = Array.from(document.querySelectorAll('tr'))
let td = Array.from(document.querySelectorAll('td'))
let current = document.getElementsByClassName('current')[0]
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 x = 0;
let y = 0;
tr.forEach((item,index)=>{
if(item === current.parentNode){
y = index
Array.from(item.querySelectorAll('td')).forEach((item,index)=>{
if(item === current){
x = index
}
})
}
})
//上
if(Number(code) === 38){
if(y === 0) y=tr.length-1
else y--
}
//下
if(Number(code) === 40){
if(y === tr.length-1) y=0
else y++
}
//左
if(Number(code) === 37){
if(x === 0) x=tr[y].children.length-1
else x--
}
//右
if(Number(code) === 39){
if(x === tr[y].children.length-1) x=0
else x++
}
current.classList.remove('current')
current = tr[y].children[x]
current.classList.add('current')
};
}
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: 请实现按键控制
var gameTR = document.querySelectorAll(".game tr");
var current = document.querySelector(".current");
var rowIndex = 0, colIndex = 0;
console.log(document.querySelectorAll('.game td'))
for(let key in gameTR){
if(gameTR[key].contains && gameTR[key].contains(current)){
rowIndex = Number(key) + 1
break
}
}
var gameTD = document.querySelectorAll('.game tr:nth-of-type(' + rowIndex + ') td');
for(let key in gameTD){
if(gameTD[key] == current){
colIndex = Number(key) + 1
break
}
}
current.className = "";
if (code == 37) {
// 左移
if (colIndex == 1) colIndex = gameTD.length;
else colIndex -= 1;
} else if (code == 38) {
// 上移
if (rowIndex == 1) rowIndex = gameTR.length;
else rowIndex -= 1;
} else if (code == 39) {
// 右移
if (colIndex == gameTD.length) colIndex = 1;
else colIndex += 1;
} else if (code == 40) {
// 下移
if (rowIndex == gameTR.length) rowIndex = 1;
else rowIndex += 1;
}
document.querySelector('.game tr:nth-of-type('+rowIndex +') td:nth-of-type(' + colIndex+ ')').className = "current";
};
} 
// 哪里出错了哎,又是实现了过不了
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: 请实现按键控制
const current = document.querySelector(".current");
if (code === 38) {
// 上
// 获取当前元素在父类中的位置
let index = Array.from(
current.parentElement.querySelectorAll("td")
).indexOf(current);
if (current.parentElement.previousElementSibling) {
// 上边还存在元素时
current.parentElement.previousElementSibling
.querySelectorAll("td")
[index].setAttribute("class", "current");
} else {
// 上边不存在元素，直接跳到最后一个元素
current.parentElement.parentElement.lastElementChild
.querySelectorAll("td")
[index].setAttribute("class", "current");
}
} else if (code === 40) {
// 下和向上同理
// 获取当前元素在父类中的位置
let index = Array.from(
current.parentElement.querySelectorAll("td")
).indexOf(current);
if (current.parentElement.nextElementSibling) {
// 下边还存在元素时
current.parentElement.nextElementSibling
.querySelectorAll("td")
[index].setAttribute("class", "current");
} else {
// 下边不存在元素，直接跳到最后一个元素
current.parentElement.parentElement.firstElementChild
.querySelectorAll("td")
[index].setAttribute("class", "current");
}
} else if (code === 37) {
// 左平移
if (current.previousElementSibling) {
// 左边存在元素
current.previousElementSibling.setAttribute("class", "current");
} else {
// 左边不存在元素时
current.parentElement.lastElementChild.setAttribute(
"class",
"current"
);
}
} else {
// 右平移同理
if (current.nextElementSibling) {
// 左边存在元素
current.nextElementSibling.setAttribute("class", "current");
} else {
// 左边不存在元素时
current.parentElement.firstElementChild.setAttribute(
"class",
"current"
);
}
}
// 清除原来的class
current.removeAttribute("class");
};
}
bind(); 
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()
var table = document.querySelector('.game')
var rowNum = document.querySelector('.game').querySelectorAll('tr')[0]
.children.length
var tdList = table.querySelectorAll('td')
var current = document.querySelector('.current')
var currentIndex = Array.prototype.indexOf.call(tdList, current)
var nextIndex =
currentIndex +
(code == '37' ? -1 : code == '39' ? 1 : code == '38' ? -rowNum : rowNum)
if (nextIndex >= tdList.length) {
nextIndex = nextIndex % tdList.length
}
if (code == '37' || code == '39') {
if (
(nextIndex / rowNum) << 0 != (currentIndex / rowNum) << 0 ||
nextIndex < 0
) {
nextIndex =
code == '37'
? (((currentIndex / rowNum) << 0) + 1) * rowNum - 1
: code == '39'
? ((currentIndex / rowNum) << 0) * rowNum
: code
}
}
Array.prototype.slice.call(tdList, currentIndex)[0].className = ''
Array.prototype.slice.call(tdList, nextIndex)[0].className = 'current'
}
} 
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: 请实现按键控制
var acTd = document.querySelector('.current');
acTd.classList.remove('current');
var acTdTr = acTd.parentElement;
var table = acTdTr.parentElement;
//给表格所有元素添加行列自定义属性
Array.from(acTdTr.parentElement.children).forEach((tr,itr)=>{
Array.from(tr.children).forEach((td,itd)=>{
td.setAttribute('row',itr); //行
td.setAttribute('col',itd); //列
})
})
// 获取选中元素的行列
var obj = {
col: acTd.getAttribute('col'),
row: acTd.getAttribute('row'),
colTotal: acTdTr.children.length-1,
rowTotal: table.children.length-1
};
switch(code){
case 37://左
if(obj.col==0){
acTd = table.querySelector(`td[col='${obj.colTotal}'][row='${obj.row}']`);
}else{
acTd = table.querySelector(`td[col='${obj.col-1}'][row='${obj.row}']`);
}
break;
case 38://上
console.log(`td[col='${obj.col}'][row='${obj.row-1}']`);
if(obj.row==0){
acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.rowTotal}']`);
}else{
acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.row-1}']`);
}
break;
case 39://右
if(obj.col==obj.colTotal){
acTd = table.querySelector(`td[col='${'0'}'][row='${obj.row}']`);
}else{
acTd = table.querySelector(`td[col='${obj.col+1}'][row='${obj.row}']`);
}
break;
case 40://下
if(obj.row==obj.rowTotal){
acTd = table.querySelector(`td[col='${obj.col}'][row='${'0'}']`);
}else{
acTd = table.querySelector(`td[col='${obj.col}'][row='${obj.row+1}']`);
}
break;
default:
break;
}
console.log(acTd);
acTd.className='current';
};
} 
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: 请实现按键控制
// 获取 dom 元素 （写在外面应该更好，不过这里不会通过测试）
var container = document.getElementById('jsContainer');
var table = container.querySelector('table');
var current = table.querySelector('.current');
var trs = table.querySelectorAll('tr');
var tds = Array.from(table.querySelectorAll('td'));
// 获取范围和当前位置
var rows = trs.length; // 行数
var totalLen = tds.length; // 总长度
var cols = totalLen / rows; // 列数
var currentIndex = tds.indexOf(current); // 当前位置
// 清除当前样式
tds[currentIndex].classList.remove('current');
//计算下一个位置
if (code === 37) {
// left
// 当前在左边 移动到右边
if (currentIndex % cols === 0) currentIndex += cols - 1;
else currentIndex -= 1;
} else if (code === 38) {
// up
// 当前在上边 移动到下边
if (currentIndex < cols) currentIndex += totalLen - cols;
else currentIndex -= cols;
} else if (code === 39) {
// right
// 当前在右边 移动到左边
if (currentIndex % cols === cols - 1) currentIndex -= cols - 1;
else currentIndex += 1;
} else if (code === 40) {
// down
// 当前在下边 移动到上边
if (currentIndex >= totalLen - cols) currentIndex -= totalLen - cols;
else currentIndex += cols;
}
// 设置当前样式
tds[currentIndex].classList.add('current');
};
}
扫描二维码，关注牛客网
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
京公网安备
11010502036488号
