JavaScript表格搜索功能故障：清除输入后无法恢复全表显示

问题概述 #

开发基于Firebase实时数据库的数据追踪表格，通过JS动态生成内容并实现搜索功能。当前问题：搜索"treasury"等关键词时可正常显示匹配行，但清除搜索框内容后，无法恢复显示全部表格数据，后续搜索也不再生效。

错误原因分析 #

1. 无效的CSS display值：搜索函数中匹配到内容时，设置了x[i].style.display = "xx"，这是无效的CSS属性值，导致清空搜索框后，原本匹配的行无法恢复默认显示状态。
2. 动态集合遍历问题：document.getElementsByClassName返回的是动态HTMLCollection，当元素被设置为display:none后，集合的长度会实时变化，导致循环无法遍历所有行。
3. Firebase数据重复加载（潜在问题）：每次Firebase数据更新时，都会往mountains数组中push新数据，导致重复生成表格行，影响搜索的准确性。

修复方案 #

1. 修复搜索函数 #

• 将匹配行的display属性改为表格行默认值table-row
• 将HTMLCollection转为静态数组，确保遍历所有行

修改后的search_animal函数：

function search_animal() {
    let input = document.getElementById('searchbar').value.toLowerCase();
    // 转为数组避免动态集合的遍历问题
    let rows = Array.from(document.getElementsByClassName('pritem'));

    rows.forEach(row => {
        if (row.innerHTML.toLowerCase().includes(input)) {
            row.style.display = "table-row";
        } else {
            row.style.display = "none";
        }
    });
}

2. 解决Firebase数据重复问题 #

每次获取Firebase数据时，先清空mountains数组和表格已有行，避免重复生成内容：

修改后的Firebase数据获取代码：

firebase.initializeApp(firebaseConfig);  
var ltbmofiles = firebase.database().ref("prLTBMO");

ltbmofiles.on("value", function(snapshot) {
    // 清空数组和表格行
    mountains = [];
    const tableBody = document.getElementById('xx');
    while (tableBody.rows.length > 0) {
        tableBody.deleteRow(0);
    }

    var placementObjectrValuesSplit = Object.values(snapshot.val() || {}); // 处理空数据
    mountains.push(...placementObjectrValuesSplit);
    
    let table = document.querySelector("table");
    generateTable(table, mountains);
})  

3. 优化表格生成函数 #

确保pritem类只添加一次到行上，避免循环中重复设置：

function generateTable(table, data) {
    const tableBody = document.getElementById('xx');
    for (let element of data) {
        let row = tableBody.insertRow(); // 直接插入到tbody中
        row.classList.add("pritem"); // 用classList更规范
        
        for (let key in element) {
            let cell = row.insertCell();
            let text = document.createTextNode(element[key]);
            cell.appendChild(text);
        }
    }
}

额外规范调整 #

表格的表头应该放在<thead>标签中，结构更规范，避免表头被误处理：

<table id="list">
    <thead>
        <tr>
            <th width="200">Requesting Office</th>
            <th width="200">Mayor's Office</th>
            <th width="200">Treasury Office</th>
            <th width="200">Budget Office</th>
            <th width="200">Mayor's Office</th>
        </tr>
    </thead>
    <tbody id='xx'></tbody>
</table>

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