基于jQuery实现表格name与acc列叠加搜索的技术问询

问题概述 #

原有代码通过#name输入框搜索表格整行内容，但新增#acc输入框后，直接复制代码会导致两个搜索互相覆盖，无法实现同时匹配两个输入框条件的叠加筛选效果。

修改后的代码 #

$(document).ready(function() {
    // 绑定两个输入框的keyup事件到同一处理函数
    $("#name, #acc").on("keyup", function() {
        // 获取并格式化搜索关键词
        const nameQuery = $("#name").val().toLowerCase().trim();
        const accQuery = $("#acc").val().toLowerCase().trim();
        
        $("#data_table tr").each(function() {
            // 替换eq索引为你表格中name列和acc列的实际位置（从0开始计数）
            const rowName = $(this).find("td:eq(1)").text().toLowerCase();
            const rowAcc = $(this).find("td:eq(2)").text().toLowerCase();
            
            // 叠加匹配逻辑：空查询自动通过，非空则必须匹配对应列
            const matchesName = !nameQuery || rowName.includes(nameQuery);
            const matchesAcc = !accQuery || rowAcc.includes(accQuery);
            
            // 仅当两个条件都满足时显示该行
            $(this).toggle(matchesName && matchesAcc);
        });
    });
});

核心改进点 #

• 统一事件处理：两个输入框共用同一筛选逻辑，避免各自触发时覆盖之前的筛选结果
• 精准列搜索：不再搜索整行文本，直接定位到name和acc对应的目标列（需根据你的表格结构调整eq索引，比如name列是第二列就用eq(1)）
• 叠加筛选逻辑：用&&实现“必须同时满足两个查询条件”，空输入框自动视为匹配，不影响另一输入框的筛选
• 性能优化建议：针对4000+行的大表格，建议给name/acc列的<td>添加专属类名（如class="name-col"），替换td:eq(n)为.name-col，大幅提升DOM查询效率

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