多表格搜索脚本首行被截断问题求助及代码修复咨询

问题描述 #

使用以下脚本实现多表格搜索功能时，出现表格首行被截断的问题。

原代码 #

window.onload = function(){
    document.getElementById("myInput").addEventListener("input",tablefilter)  
}
function tablefilter() {
            // Declare variables
            var input, filter, table, tr, td, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            tables = document.querySelectorAll(".table");
            
            tables.forEach(function(table) {
                tr = table.getElementsByTagName("tr");
                // Loop through all table rows, and hide those who don't match the search query
                for (i = 0; i < tr.length; i++) {
                    if (!tr[i].classList.contains('header')) {
                        td = tr[i].getElementsByTagName("td"),
                            match = false;
                        for (j = 0; j < td.length; j++) {
                            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                                match = true;
                                break;
                            }
                        }
                        if (!match) {
                            tr[i].style.display = "none";
                        } else {
                            tr[i].style.display = "";
                        }
                    }
                }
            });
            
}

问题原因 #

1. 全局变量污染：j变量未使用var/let声明，成为全局变量。遍历多个表格时，j不会在每个表格的行循环中重置为0，导致后续表格的行无法正确遍历所有<td>元素，match始终为false，行被错误隐藏。
2. 变量作用域不清晰，部分逻辑执行时出现意外判断，导致首行数据被误隐藏。

修复后的代码 #

window.onload = function(){
    document.getElementById("myInput").addEventListener("input", tablefilter)  
}
function tablefilter() {
    // Declare variables
    var input, filter, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    const tables = document.querySelectorAll(".table");
    
    tables.forEach(function(table) {
        tr = table.getElementsByTagName("tr");
        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            if (!tr[i].classList.contains('header')) {
                td = tr[i].getElementsByTagName("td");
                let match = false;
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        match = true;
                        break;
                    }
                }
                tr[i].style.display = match ? "" : "none";
            }
        }
    });
}

修复说明 #

• 新增j变量声明，避免全局污染，确保每个表格的行循环中j从0开始遍历<td>。
• 使用const声明tables，明确变量不可变的作用域，避免意外修改。
• 使用let声明match，缩小变量作用域，提升代码可读性和安全性。
• 简化显示/隐藏的条件判断，使代码逻辑更直观。

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