layui编辑 tab键切换编辑

本文介绍了一个在LayUI表格编辑模式下实现键盘导航的方法,包括Tab、Enter、方向键等功能,通过JavaScript代码实现上下左右及表格内的快速移动,提高编辑效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

done: function (res, curr, count) {
                        $(document).on('keydown', '.layui-table-edit', function (e) {
                            debugger;
                            var td = $(this).parent("td"), tr = td.parent('tr'), trs = tr.parent().find('tr'),
                                tr_index = tr.index(), td_index = td.index(),
                                td_last_index = tr.find('[data-edit="text"]:last').index(),
                                td_first_index = tr.find('[data-edit="text"]:first').index(),
                                tr_last_index = trs.last().index(),
                                tr_first_index = 0;
                            switch (e.keyCode) {
                                case 9:     //tab键

                                //tab只支持上下移动切换,竟然找不到this对象所在的td
                                case 13:     //enter键
                                case 39:     //右键
                                    if (td_index == td_last_index) {
                                        if (tr_index == trs.length - 1) trs.eq(0).find('td').eq(td_first_index).click();
                                        else tr.next().find('td').eq(td_first_index).click();
                                    } else {
                                        td.nextAll('[data-edit="text"]:first').click();
                                    }
                                    break;
                                case 37:     //左键
                                    if (td_index == td_last_index) td.prevAll('[data-edit="text"]:first').click();
                                    else td.prevAll('[data-edit="text"]:first').click();
                                    break;
                                case 38:     //上键
                                    if (tr_index == tr_first_index) tr.eq(tr_last_index).find('td').eq(td_index).click();
                                    else tr.prev().find('td').eq(td_index).click();
                                    break;
                                case 40:     //下键
                                    if (tr_index == tr_last_index) trs.eq(0).find('td').eq(td_index).click();
                                    else  tr.next().find('td').eq(td_index).click();
                                    break;
                            }
                        })
                    }

使用方法:
1.在需要启用此功能的页面中table done回调函数中插入。
2.修改源代码,在源代码中直接插入,此方法就不需要在每一个页面的table done回调函数中 插入,但是这里由于是三个键整合了,整到源码必须三键分开写方法。请根据具体情况改写。

感谢大神博客园大神zakary_zhen分享。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值