Laravel Livewire提交数据后如何恢复jQuery表格高亮功能？

问题背景 #

我有一个表格，提交数据后，高亮的行消失，且jQuery实现的行高亮切换功能无法使用。初始jQuery代码如下：

$(document).ready(function() {
    // 初始高亮最后一行
    var table = $('#transaksiKasir tr:last');
    table.addClass('bg-slate-700 text-white active');

    $('body').on('keydown', function (e){
        // 按下上下箭头时获取行数据
        if(e.keyCode == 40 || e.keyCode == 38){
            var table = $('#transaksiKasir tbody tr');
            var table_row = $('#transaksiKasir tr.text-white');
        }
        // 下箭头
        if(e.keyCode == 40){
            // 到达最后一行时停止
            if(table_row.index() == table.length - 1) {
                return false;
            }
            
            table_row.removeClass('bg-slate-700 text-white active');
            table_row.next().addClass('bg-slate-700 text-white active')
        }
        // 上箭头
        else if(e.keyCode == 38){
            // 到达第一行时停止
            if(table_row.index() == 0) {
                return false;
            }
            
            table_row.removeClass('bg-slate-700 text-white active');
            table_row.prev().addClass('bg-slate-700 text-white active');
        }
    });
});

更新后的问题 #

我改用以下代码，但提交数据后仅能切换到表格的首行和末行：

document.addEventListener("DOMContentLoaded", () => {
    Livewire.hook('element.updated', (el, component) => {
        $(document).ready(function() {
            // 初始高亮最后一行
            var table = $('#transaksiKasir tr:last');
            table.addClass('bg-slate-700 text-white active');
        
            // 绑定body的keydown事件
            $('body').on('keydown', function(e) {
                // 获取所有表格行和当前高亮行
                var tableRows = $('#transaksiKasir tbody tr');
                var highlightedRow = $('#transaksiKasir tr.text-white');
        
                // 下箭头
                if (e.keyCode == 40) {
                    // 到达最后一行时停止
                    if (highlightedRow.index() == tableRows.length - 1) {
                        return false;
                    }
        
                    // 移除当前行高亮，高亮下一行
                    highlightedRow.removeClass('bg-slate-700 text-white active');
                    highlightedRow.next().addClass('bg-slate-700 text-white active');
                }
                // 上箭头
                else if (e.keyCode == 38) {
                    // 到达第一行时停止
                    if (highlightedRow.index() == 0) {
                        return false;
                    }
        
                    // 移除当前行高亮，高亮上一行
                    highlightedRow.removeClass('bg-slate-700 text-white active');
                    highlightedRow.prev().addClass('bg-slate-700 text-white active');
                }
            });
        });
    })
});

解决方案 #

问题核心在于：每次Livewire更新时重复绑定keydown事件，导致逻辑冲突；同时行索引的获取方式错误，导致无法正确定位中间行。以下是修正后的代码：

document.addEventListener("DOMContentLoaded", () => {
    // 只绑定一次keydown事件，避免重复绑定导致逻辑混乱
    $('body').on('keydown', function(e) {
        // 只处理上下箭头
        if (e.keyCode !== 40 && e.keyCode !== 38) return;

        const tableRows = $('#transaksiKasir tbody tr');
        const highlightedRow = $('#transaksiKasir tr.active'); // 用.active类定位更准确

        // 没有高亮行时直接返回
        if (!highlightedRow.length) return;

        // 获取当前高亮行在tbody tr集合中的正确索引
        const currentIndex = tableRows.index(highlightedRow);

        // 下箭头逻辑
        if (e.keyCode === 40) {
            if (currentIndex === tableRows.length - 1) return;
            highlightedRow.removeClass('bg-slate-700 text-white active');
            tableRows.eq(currentIndex + 1).addClass('bg-slate-700 text-white active');
        }
        // 上箭头逻辑
        else if (e.keyCode === 38) {
            if (currentIndex === 0) return;
            highlightedRow.removeClass('bg-slate-700 text-white active');
            tableRows.eq(currentIndex - 1).addClass('bg-slate-700 text-white active');
        }
    });

    // Livewire更新后仅重置高亮状态，不重复绑定事件
    Livewire.hook('element.updated', (el, component) => {
        // 先清除所有行的高亮类
        $('#transaksiKasir tr').removeClass('bg-slate-700 text-white active');
        // 重新高亮最后一行
        $('#transaksiKasir tbody tr:last').addClass('bg-slate-700 text-white active');
    });
});

关键修改说明 #

1. 避免重复绑定事件：将keydown事件绑定移到Livewire钩子外部，确保只执行一次，防止多次绑定导致的逻辑冲突
2. 修正索引判断：使用tableRows.index(highlightedRow)获取当前行在tbody tr集合中的正确索引，解决之前索引不匹配的问题
3. 精准定位高亮行：用.active类定位高亮行，避免其他可能带有text-white类的行干扰
4. 重置高亮逻辑：Livewire更新时先清空所有行的高亮状态，再设置最后一行高亮，确保状态正确

内容的提问来源于stack exchange，提问作者Muzakir Nur