layui table 光标根据上下左右按键在table中移动并选中单元格内容

原创已于 2022-08-05 10:27:54 修改 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #html

于 2022-06-01 15:57:13 首次发布

本文介绍如何使用jQuery和layui库，通过监听键盘事件，实现在表格中利用箭头键快速切换单元格并进入编辑状态。通过上下左右键实现高效的数据行和列导航，简化了表格编辑流程。

$(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();
                    setTimeout(function(){
                        $('.layui-table-edit').select(),0
                    });
                    break;
                case "ArrowDown"://下键
                    tr['next']().children('td').eq(index).click();
                    setTimeout(function(){
                        $('.layui-table-edit').select(),0
                    });
                    break;
                case "ArrowLeft"://左键
                    td['prevAll']('[data-edit="text"]:first').click();
                    setTimeout(function(){
                        $('.layui-table-edit').select(),0
                    });
                    break;
                case "ArrowRight"://右键
                    td['nextAll']('[data-edit="text"]:first').click();
                    setTimeout(function(){
                        $('.layui-table-edit').select(),0
                    });
                    break;
            }
        });