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['prevAl

这篇博客介绍了如何使用layui表格库,结合JavaScript实现表格中单元格的编辑功能,并通过键盘上下左右键控制光标焦点在编辑行或列之间移动,提供类似电子表格的操作体验。
最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



