时间戳

首页 > 解决方案 > 可导航表中的过滤行

javascript - 可导航表中的过滤行

问题描述

更新： 我终于找到了一个解决方案（有一个while循环，在下面的代码中）但是有一个问题：当我导航搜索结果（所以没有隐藏的元素）时，在过滤结果中导航一点之后，导航停止工作并且我收到“类型错误：行 [​​selectedRow] 未定义”

if(selectedRow >= rows.length){
                selectedRow = 0;
            } else if(selectedRow < 0){
                selectedRow = rows.length-1;
            }

这部分适用于完整列表，但不适用于过滤列表。我认为while循环是造成这种情况的原因。请问我该如何解决？

导航：

var rows = document.getElementById("pokemons-list").children[1].children;
        var selectedRow = 0;
        
        document.body.onkeydown = function(e){
    
            //Clear out old row's color
            rows[selectedRow].style.backgroundColor = "#FFFFFF";

            //Calculate new row
            if(e.keyCode == 38){
                if(rows[selectedRow].style.display == "none"){
                while(rows[selectedRow].style.display == "none"){
                selectedRow--;
                }
                }else {
                    selectedRow--;
                }
            } else if(e.keyCode == 40){
                if(rows[selectedRow].style.display == "none"){
                while(rows[selectedRow].style.display == "none"){
                selectedRow++;
                }
                }else {
                    selectedRow++;
                }
            } else if(e.keyCode == 13){
                Pokemon_ID = selectedRow + 1;
                document.getElementById("id-input").value = Pokemon_ID;
                document.getElementById("id-input").click();
            }
            if(selectedRow >= rows.length){
                selectedRow = 0;
            } else if(selectedRow < 0){
                selectedRow = rows.length-1;
            }
            
            //Set new row's color
            rows[selectedRow].style.backgroundColor = "dodgerblue";

        
        };

标签： javascripthtml

解决方案

看起来您的过滤器功能隐藏了与您输入的字符串不匹配的行。通过将显示属性设置为“无”来实现隐藏。

导航时，您不能忽略显示属性设置为“无”的表格行吗？

更新：您可以rows[selectedRow].style.display在执行之前检查rows[selectedRow].style.backgroundColor = "dodgerblue". 如果值为"none"，请重复您selectedRow在函数中所做的更改（无论是增量还是减量）。

更新 2：考虑下面的代码块：

while(rows[selectedRow].style.display == "none"){
    selectedRow++;
}

如果selectedRow进入 while 循环的值是0并且rows[0].style.display具有该值"none"，则循环体将值更改selectedRow为 -1。控件将立即返回循环保护并尝试检查 rows[-1].style.display. 这是您想要避免的事情，那么为什么不在selectedRow您更改它的每一行之后尝试检查呢？一个快速的解决方案将涉及更改您的 while 循环的循环体：

while(rows[selectedRow].style.display == "none"){
    selectedRow++;
    if(selectedRow >= rows.length){
        selectedRow = 0;
    }
}

和

while(rows[selectedRow].style.display == "none"){
    selectedRow--;
    if(selectedRow < 0){
        selectedRow = rows.length-1;
    }
}

推荐阅读