table切换数据 vue_vue+element-ui 实现table单元格点击编辑,并且按上下左右键单元格之间切换...

let self = this;if (boolen == true) {

document.οnkeydοwn= function(e) {

console.log(e);var curel = document.activeElement; //当前元素

var curcellIndex = curel.cellIndex; //当前元素行单元格索引

var curRowIndex = curel.parentElement.sectionRowIndex; //当前元素行的索引;

var curtbody = curel.parentElement.parentElement.children; //当前tbody内容的整个表单

curel.onblur = function() {

console.log(curel.innerText);

self.check(curel.innerText);

};if (e.keyCode == 38) {//按上键

if (curRowIndex - 1 < 0) {

curel.contentEditable= false;

curtbody[curtbody.length- 1].children[

curcellIndex

].contentEditable= true;

curtbody[curtbody.length- 1].children[curcellIndex].focus();

}else{

curel.contentEditable= false;

curtbody[curRowIndex- 1].children[

curcellIndex

].contentEditable= true;

curtbody[curRowIndex- 1].children[curcellIndex].focus();

}

}else if (e.keyCode == 37) {

let preCellindex=curtbody[curtbody.length- 1].children.length - 1;

console.log("preRow", curel.parentElement.children.length);//键盘按钮左键

if (curcellIndex - 1 == 0) {if (curRowIndex - 1 < 0) {

curel.contentEditable= false;

curtbody[curtbody.length- 1].children[

preCellindex

].contentEditable= true;

curtbody[curtbody.length- 1].children[preCellindex].focus();

}else{

curel.contentEditable= false;

curtbody[curRowIndex- 1].children[

preCellindex

].contentEditable= true;

curtbody[curRowIndex- 1].children[preCellindex].focus();

}

}else{

curel.contentEditable= false;

curel.parentElement.children[

curcellIndex- 1].contentEditable= true;

curel.parentElement.children[curcellIndex- 1].focus();

}

}else if (e.keyCode == 39 || e.keyCode == 9) {//键盘按钮右键

e.preventDefault();if (curcellIndex + 1 ==curel.parentElement.children.length) {if (curRowIndex + 1 ==curtbody.length) {

curel.contentEditable= false;

curtbody[0].children[1].contentEditable = true;

curtbody[0].children[1].focus();

}else{

curel.contentEditable= false;

curtbody[curRowIndex+ 1].children[1].contentEditable = true;

curtbody[curRowIndex+ 1].children[1].focus();

}

}else{

curel.contentEditable= false;

curel.parentElement.children[

curcellIndex+ 1].contentEditable= true;

curel.parentElement.children[curcellIndex+ 1].focus();

}

}else if (e.keyCode == 40 || e.keyCode == 13) {//向下按钮按键

e.preventDefault();if (curRowIndex + 1 ==curtbody.length) {

curel.contentEditable= false;

curtbody[0].children[curcellIndex].contentEditable = true;

curtbody[0].children[curcellIndex].focus();

}else{

curel.contentEditable= false;

curtbody[curRowIndex+ 1].children[

curcellIndex

].contentEditable= true;

curtbody[curRowIndex+ 1].children[curcellIndex].focus();

}

}

};

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值