多输入框过滤JavaScript表格：单条件正常多条件失效问题排查

你说得没错，问题确实出在filter变量的处理和当前的过滤逻辑上。现在的代码每次只检查你触发输入的那列，而且||运算符会让filter只取第一个有值的输入内容，完全没做到多条件同时过滤——这就是为什么单个输入正常，多个输入就失效的原因。

修正后的过滤逻辑 #

我们需要改成：每一行必须满足所有非空输入框的条件才显示，而不是只检查某一列。下面是重写后的searchingEngine函数：

function searchingEngine() {
    // 获取所有输入框的值，统一转成大写（实现不区分大小写搜索）
    const servicePriceFilter = document.getElementById("searchServicePrice").value.trim().toUpperCase();
    const partsPriceFilter = document.getElementById("searchPartsPrice").value.trim().toUpperCase();
    const dateFilter = document.getElementById("searchDate").value.trim().toUpperCase();
    const sumPriceFilter = document.getElementById("searchBySumPrice").value.trim().toUpperCase();

    const table = document.getElementById("table");
    // 只遍历tbody里的行，避免误操作表头
    const trs = table.querySelectorAll("#searchBody tr");

    trs.forEach(tr => {
        // 获取当前行对应列的内容，转成大写并去除首尾空格
        const dateText = tr.cells[0].textContent.trim().toUpperCase();
        const partsPriceText = tr.cells[2].textContent.trim().toUpperCase();
        const servicePriceText = tr.cells[3].textContent.trim().toUpperCase();
        const sumPriceText = tr.cells[5].textContent.trim().toUpperCase();

        // 逐个判断条件：输入框为空则自动满足，否则检查内容是否匹配
        const matchesServicePrice = servicePriceFilter === "" || servicePriceText.includes(servicePriceFilter);
        const matchesPartsPrice = partsPriceFilter === "" || partsPriceText.includes(partsPriceFilter);
        const matchesDate = dateFilter === "" || dateText.includes(dateFilter);
        const matchesSumPrice = sumPriceFilter === "" || sumPriceText.includes(sumPriceFilter);

        // 所有非空条件都满足时才显示该行
        tr.style.display = (matchesServicePrice && matchesPartsPrice && matchesDate && matchesSumPrice) ? "" : "none";
    });
}

同步修改HTML的事件绑定 #

原来的onkeyup传了列索引，现在不需要了，统一调用无参的searchingEngine：

<form id="search-repairs">
    <p>
        Service Price : <input type="text" id="searchServicePrice" class="searchInput" onkeyup="searchingEngine()" />
        Parts Price : <input type="text" id="searchPartsPrice" class="searchInput" onkeyup="searchingEngine()" />
        Summary Price : <input type="text" id="searchBySumPrice" class="searchInput" onkeyup="searchingEngine()" />
        Date : <input type="text" id="searchDate" class="searchInput" onkeyup="searchingEngine()" />
    </p>
</form>

方案说明 #

• 不再依赖传入的列索引，每次触发输入时同时检查所有输入框的条件，保证多条件过滤生效。
• 用&&逻辑代替原来的||，确保只有满足所有非空条件的行才会显示。
• 加入trim()处理输入内容和表格文本，避免首尾空格干扰搜索结果。
• 精准遍历tbody内的数据行，解决了原代码可能隐藏表头的问题。

现在你可以同时输入Service Price和Parts Price等多个条件，就能正确过滤出符合所有要求的表格行。

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