layui 框架 table插件实现键盘快捷键切换单元格编辑

该博客介绍了如何在layui框架的表格插件中实现键盘快捷键（Enter, Left, Right, Up, Down）进行单元格编辑的切换。通过监听keydown事件并结合DOM操作，实现了在开启edit:text模式的单元格间流畅切换，提高了数据编辑的效率。

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

layui 框架 table插件实现键盘快捷键切换单元格编辑）

Alt


// 使用方法:
//1.在需要启用此功能的页面中table done回调函数中插入。
//2.修改源代码，在源代码中直接插入，此方法就不需要在每一个页面的table done回调函数中 插入。
//注：单元格必须开启了 edit：text 模式，才支持键盘切换。
$(document).on('keydown', '.layui-table-edit', function(e) {
    var td = $(this).parent('td'),
    tr = td.parent('tr'),
    trs = tr.parent().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();
    switch (e.keyCode) {
         case 13: //enter
         case 39: //右
             td.nextAll('[data-edit="text"]:first').click();
             if (td_index == td_last_index) {
                  tr.next().find('td').eq(td_first_index).click();
                  if (tr_index == trs.length - 1) {
                      trs.eq(0).find('td').eq(td_first_index).click();
                  }
             }
             setTimeout(function() { $('.layui-table-edit').select() }, 0);
             break;
        case 37: //左
             td.prevAll('[data-edit="text"]:first').click();
             setTimeout(function() { $('.layui-table-edit').select() }, 0);
             break;
        case 38: //上
            tr.prev().find('td').eq(td_index).click();
            setTimeout(function() { $('.layui-table-edit').select() }, 0);
            break;
        case 40: //下
            tr.next().find('td').eq(td_index).click();
            setTimeout(function() { $('.layui-table-edit').select() }, 0);
            break;
        
     }
});