layui table 使用tab键切换单元格

最新推荐文章于 2025-09-11 02:20:20 发布

原创最新推荐文章于 2025-09-11 02:20:20 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

本文介绍如何在layui表格中利用JavaScript实现Tab键切换单元格焦点，提升前端表单编辑的用户体验。

<script src="${ctx}/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    /*
        *编辑数据表格，键盘快捷键方法。
        *可跳过无编辑属性的列
        *tab 右边一个单元格
        *shift + tab 左边一个单元格
        *enter 下一行的单元格
        *shift + enter 上一行的单元格
        */
    //支持tab+enter 的切换
    $(document).on('keydown keyup', '.layui-input',
        function (event) {
            var td = $(this).parent('td'),
                index = td.index(),
                tr = td.parent('tr'),
                isShift = $(document).data('shift'),
                isKeydown = (event.type == "keydown");
            switch (event.key) {
                case "Shift":
                    $(document).data('shift', isKeydown);
                    break;
                case "Tab":
                    event.preventDefault();
                    isKeydown && td[isShift ? 'prevAll' : 'nextAll']('[data-edit="text"]:first').click();
                    break;
                case "Enter":
                    isKeydown && tr[isShift ? 'prev' : 'next']().children('td').eq(index).click();
                    break;
            }
        });
    //方向键的切换
    $(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:
            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 () {
                    $('.last-table-edit').select()
                }, 0)
                break;
            case 37:
                td.prevAll('[data-edit="text"]:first').click();
                setTimeout(function () {
                    $('.last-table-edit').select()
                }, 0)
                break;
            case 38:
                tr.prev().find('td').eq(td_index).click();
                setTimeout(function () {
                    $('.last-table-edit').select()
                }, 0)
                break;
            case 40:
                tr.next().find('td').eq(td_index).click();
                setTimeout(function () {
                    $('.last-table-edit').select()
                }, 0)
                break;
        }
    });


</script>