JavaScript点击按钮筛选表格匹配行时闪现后恢复全量数据问题求解

核心问题原因 #

点击Apply按钮后筛选结果闪现消失的直接原因：

• Apply按钮是submit类型，放在form标签内会触发默认表单提交行为，导致页面重载，前端修改的DOM显示状态全部重置。

除此之外现有代码还存在多处异常点会导致筛选功能失效：

• JS代码中元素选择器和HTML不匹配：获取输入框使用了不存在的idVendor_Name，获取表格使用了不存在的idtable_id
• 输入框重复设置了id属性，不符合DOM规范
• 事件绑定错误：给输入框绑定click事件时直接执行了myFunction()，而非传入函数引用；form标签上绑定了不必要的click事件，容易误触发筛选
• 筛选逻辑未跳过表头，可能导致表头被隐藏

具体修复步骤 #

1. 将Apply按钮的类型从submit改为button，阻止默认表单提交行为
2. 给HTML的table标签添加id="table_id"，修正JS中输入框的选择器为document.getElementById("Name")
3. 删除输入框重复的id属性，移除form标签上的onclick事件、输入框多余的click事件监听
4. 优化筛选逻辑，仅遍历tbody内的表格行，避免表头被隐藏
5. 给Reset按钮绑定筛选逻辑，点击重置输入框后自动恢复所有表格行显示

修复后代码 #

HTML代码 #

<div class="container">
    <div class="sidebar">
        <form action=" " method="POST" autocomplete="off">
            {% csrf_token %}
            <div>Name</div>
            <div class="row" id="id_row">
                <input type="text" 
                       name="Name" 
                       id="Name" 
                       maxlength="255"
                       class="form-control mb-3" 
                       placeholder="Name" 
                       required="" 
                       onkeyup="myFunction()">
            </div>
            <div>
                <input type="button" 
                       value="Apply" 
                       id="btn_submit" 
                       style="width:72px;height:34px;" 
                       class="btn btn-success btn" 
                       onclick="myFunction()">
                <input type="reset" 
                       value="Reset" 
                       id="btn_reset" 
                       style="width:72px;height:34px;" 
                       class="btn btn-success btn"
                       onclick="myFunction()">
            </div>
        </form>
    </div>

    <table id="table_id">
        <thead>
        <th> Country</th>
        <th> Region</th>
        <th> name</th>
        </thead>
        <tbody>
        <tr>
            <td>US</td>
            <td>Northamerica</td>
            <td>Dell</td>
        </tr>
        </tbody>
    </table>
</div>

JS代码 #

function myFunction() {
    var input, filter, table, tr, td, i, j;
    input = document.getElementById("Name");
    filter = input.value.toUpperCase();
    table = document.getElementById("table_id");
    // 仅获取表体行，避免表头被筛选
    tr = table.querySelector("tbody").getElementsByTagName("tr");

    // 遍历所有表格行，隐藏不匹配搜索条件的行
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        let isMatch = false;
        for (j = 0; j < td.length; j++) {
            let tdata = td[j];
            if (tdata && tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
                isMatch = true;
                break;
            }
        }
        tr[i].style.display = isMatch ? "" : "none";
    }
}

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