如何高亮表格可见行、按键导航并回车在新窗口打开对应URL

我来帮你搞定这两个需求——让上下键只在可见行里切换高亮，以及按下回车时打开对应行的链接。先看修改后的完整代码，再给你拆解关键改动：

$(document).ready(function(){
    $("#search").on("keyup", function(e) {
        // 修正按键判断：仅当不是回车、上下键时才执行搜索过滤
        if(!(e.which === 13 || e.which === 38 || e.which === 40)){
            var value = $(this).val().toLowerCase();
            $("#data tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
            // 搜索完成后自动高亮第一行可见行
            highlightFirstVisibleRow();
        }
    });

    // 页面初始化时高亮第一行可见行
    highlightFirstVisibleRow();
});

function highlightFirstVisibleRow() {
    var visibleRows = $('#data tr:visible');
    if(visibleRows.length > 0) {
        $('#data tr').removeClass('highlight');
        visibleRows.eq(0).addClass('highlight');
    }
}

function highlight(newIndex) {
    // 只操作可见行集合，跳过隐藏行
    var visibleRows = $('#data tr:visible');
    if(visibleRows.length === 0) return;

    // 处理索引边界：循环切换（第一行按上键跳最后一行，最后一行按下键跳第一行）
    if(newIndex < 0) {
        newIndex = visibleRows.length - 1;
    } else if(newIndex >= visibleRows.length) {
        newIndex = 0;
    }

    // 移除所有高亮，给目标可见行添加高亮样式
    $('#data tr').removeClass('highlight');
    visibleRows.eq(newIndex).addClass('highlight');
}

$(document).keydown(function (e) {
    var visibleRows = $('#data tr:visible');
    var currentHighlightedIndex = visibleRows.index($('#data tr.highlight'));

    switch(e.which) {
        case 13:
            // 获取当前高亮行的链接地址，在新窗口打开
            var targetUrl = $('#data tr.highlight a').attr('href');
            if(targetUrl) {
                window.open(targetUrl, '_blank');
            }
            $("#search").val("");
            $('#data tr').removeClass('highlight');
            // 回车后重置高亮到第一行可见行
            highlightFirstVisibleRow();
            break;
        case 38:
            // 上键：索引减1
            highlight(currentHighlightedIndex - 1);
            break;
        case 40:
            // 下键：索引加1
            highlight(currentHighlightedIndex + 1);
            break;
    }
});

关键改动说明： #

1. 修正搜索按键判断逻辑
   原代码的条件if(e.which != 13||e.which != 38||e.which != 40)存在逻辑错误——一个按键不可能同时等于三个值，导致按上下键/回车时也会触发搜索过滤。改成if(!(e.which === 13 || e.which === 38 || e.which === 40))，确保只有非导航键才执行搜索。

2. 基于可见行的导航逻辑

   • 每次执行高亮操作时，先通过$('#data tr:visible')获取所有可见行的集合，彻底跳过隐藏行；
   • 索引计算完全基于可见行集合，处理边界时支持循环切换（比如从第一行按上键直接跳到最后一行可见行）；
   • 新增highlightFirstVisibleRow函数，用于搜索后、回车后自动高亮第一行可见行，优化用户操作体验。

3. 回车打开链接功能实现
   在回车事件中，通过$('#data tr.highlight a').attr('href')提取当前高亮行的链接地址，再用window.open(targetUrl, '_blank')在新窗口打开。同时增加了空值判断，避免无链接时出错。

这样修改后，就能完美实现你需要的两个功能啦！

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