layui编辑 tab键切换编辑

最新推荐文章于 2023-04-20 09:25:03 发布

转载最新推荐文章于 2023-04-20 09:25:03 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/zakary-zhen/p/11125561.html

文章标签：

#layui编辑 tab键切换编辑

layui 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个在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;
}
})
}