layui table 可编辑单元格 JS实现通过键盘上下左右键 光标焦点移动到旁边的编辑行/列

来源： layui table 可编辑单元格 JS实现通过键盘上下左右键 光标焦点移动到旁边的编辑行/列_CaiXinXing的CSDN博客-CSDN博客

layui table 可编辑单元格 JS实现通过键盘上下左右键 光标焦点移动到旁边的编辑行/列

类似效果

上下左右键实现的代码

layui.config({
base: '/static/layuiadmin/’ //静态资源所在路径
}).extend({
index: 'lib/index’ //主入口模块
}).use(['index’,’table’,’form’],function(){

var $ = layui.JQuery;
var table = layui.table,
var form = layui.form;

//按键监听事件
$(document).on('keydown’, '.layui-input’,
function(event) {
var td = $(this).parent('td’);
var index = td.index();
var tr = td.parent('tr’);
switch (event.key) {
case “ArrowUp”://上键
tr['prev’]().children('td’).eq(index).click();
break;
case “ArrowDown”://下键
tr['next’]().children('td’).eq(index).click();
break;
case “ArrowLeft”://左键
td['prevAll’]('[data-edit=”text”]:first’).click();
break;
case “ArrowRight”://右键
td['nextAll’]('[data-edit=”text”]:first’).click();
break;
}
});

}