实现基于多输入条件的JavaScript表格“与”逻辑过滤-php教程-PHP中文网

实现基于多输入条件的JavaScript表格“与”逻辑过滤

心靈之曲

发布： 2025-09-05 10:51:07

原创

601人浏览过

实现基于多输入条件的JavaScript表格“与”逻辑过滤

本教程详细介绍了如何使用纯JavaScript实现HTML表格的动态过滤功能，特别侧重于处理多个搜索输入条件之间的“与”逻辑关系。通过构建清晰的HTML结构和优化JavaScript过滤算法，即使面对部门和角色等多个筛选维度，也能确保表格数据精准匹配所有指定条件，提升用户交互体验，且无需依赖jQuery。

挑战：多条件“与”逻辑过滤

在网页应用中，动态过滤表格数据是常见的需求。当数据量较大时，用户往往需要根据多个条件（例如，部门和角色）来筛选结果。传统的单输入过滤或简单的“或”逻辑过滤已无法满足需求。例如，用户可能希望同时查找“市场部”且为“团队负责人”的所有员工，这就要求过滤机制能够处理多条件之间的“与”逻辑关系。

现有的一些JavaScript实现，可能仅能处理单个搜索输入，或者在尝试使用多个输入框时，错误地实现了“或”逻辑（只要满足任一条件就显示），甚至因为逻辑冲突导致无结果。本教程将提供一个纯JavaScript解决方案，实现精确的多条件“与”逻辑过滤。

HTML结构设计：为过滤准备

为了实现高效且可扩展的多条件过滤，我们需要在HTML结构中为表格和输入框进行适当的设计。

表格结构：表格的zuojiankuohaophpcnthead>部分应为每个可过滤的列定义一个data-column-name属性。这个属性将作为JavaScript中识别列的键。表格主体<tbody>中的每一行<tr>包含实际的数据单元格<td>。

<!-- PHP 生成的表格示例 -->
<table id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th data-column-name="dept">部门</th>
            <th data-column-name="role">角色</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>张三</td><td>市场部</td><td>经理</td></tr>
        <tr><td>2</td><td>李四</td><td>销售部</td><td>主管</td></tr>
        <tr><td>3</td><td>王五</td><td>市场部</td><td>团队负责人</td></tr>
        <tr><td>4</td><td>赵六</td><td>研发部</td><td>工程师</td></tr>
        <tr><td>5</td><td>钱七</td><td>市场部</td><td>员工</td></tr>
        <tr><td>6</td><td>孙八</td><td>销售部</td><td>团队负责人</td></tr>
    </tbody>
</table>

登录后复制

过滤输入框：为每个过滤维度（如部门、角色）创建一个独立的输入框。每个输入框都应包含一个data-filter-column属性，其值应与表格<thead>中对应列的data-column-name值匹配。这将帮助JavaScript将输入框与要过滤的特定列关联起来。
```
<div class="filter-controls">
    <input type="text" class="filter-input" placeholder="按部门过滤" data-filter-column="dept">
    <input type="text" class="filter-input" placeholder="按角色过滤" data-filter-column="role">
    <button id="clearFilters">清除所有过滤</button>
</div>
```
登录后复制

JavaScript核心逻辑：实现多条件“与”过滤

我们的JavaScript逻辑将围绕三个核心功能构建：收集所有活跃的过滤器、遍历并匹配表格行，以及绑定事件监听器。

1. 收集所有活跃过滤器

当任何一个过滤输入框内容改变时，我们需要获取所有输入框的当前值，并将其与对应的过滤列关联起来。

立即学习“Java免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

/**
 * 收集所有过滤输入框的值和对应的列名。
 * @returns {Array<Object>} 包含 { column: string, value: string } 对象的数组。
 */
function getFilterCriteria() {
    const filterInputs = document.querySelectorAll('.filter-input');
    const criteria = [];
    filterInputs.forEach(input => {
        const column = input.getAttribute('data-filter-column');
        const value = input.value.trim().toLowerCase();
        if (column && value) { // 只有当列名和值都存在时才添加
            criteria.push({ column, value });
        }
    });
    return criteria;
}

登录后复制

2. 遍历并匹配表格行

这是过滤的核心部分。它将遍历表格的每一行，并对每一行应用所有收集到的过滤条件。只有当一行满足所有条件时，它才会被显示。

/**
 * 根据给定的过滤条件过滤表格。
 */
function filterTable() {
    const table = document.getElementById('myTable');
    if (!table) return;

    const filterCriteria = getFilterCriteria();
    const rows = table.querySelectorAll('tbody tr');
    const headerCells = table.querySelectorAll('thead th');

    // 构建列名到索引的映射，以便根据data-filter-column快速找到列
    const columnIndexMap = {};
    headerCells.forEach((th, index) => {
        const colName = th.getAttribute('data-column-name');
        if (colName) {
            columnIndexMap[colName] = index;
        }
    });

    rows.forEach(row => {
        let rowMatchesAllFilters = true; // 假设行匹配所有过滤器

        if (filterCriteria.length === 0) {
            // 如果没有过滤条件，则显示所有行
            row.style.display = '';
            return;
        }

        // 遍历所有过滤条件，执行“与”逻辑
        for (const criterion of filterCriteria) {
            const filterColumnName = criterion.column;
            const filterValue = criterion.value;

            const columnIndex = columnIndexMap[filterColumnName];

            // 如果过滤列名无效或未映射到表格列，则认为不匹配
            if (columnIndex === undefined) {
                rowMatchesAllFilters = false;
                break;
            }

            const cell = row.cells[columnIndex];
            if (!cell || !cell.textContent.toLowerCase().includes(filterValue)) {
                rowMatchesAllFilters = false; // 只要有一个条件不匹配，则整行不匹配
                break;
            }
        }

        row.style.display = rowMatchesAllFilters ? '' : 'none';
    });
}

登录后复制

3. 绑定事件监听

我们需要在页面加载完成后，为所有过滤输入框绑定input事件，并在清除按钮上绑定click事件。

/**
 * 初始化过滤功能，绑定事件监听器。
 */
function initTableFilter() {
    const filterInputs = document.querySelectorAll('.filter-input');
    filterInputs.forEach(input => {
        input.addEventListener('input', filterTable);
    });

    const clearButton = document.getElementById('clearFilters');
    if (clearButton) {
        clearButton.addEventListener('click', () => {
            filterInputs.forEach(input => input.value = ''); // 清空所有输入框
            filterTable(); // 重新过滤，显示所有内容
        });
    }
}

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initTableFilter);

登录后复制

完整示例代码

将上述HTML结构和JavaScript代码结合起来，即可实现完整的基于多输入条件的“与”逻辑过滤功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 多条件表格“与”过滤</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .filter-controls { margin-bottom: 20px; }
        .filter-input { padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; }
        #clearFilters { padding: 8px 15px; background-color: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; }
        #clearFilters:hover { background-color: #d32f2f; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        tr:nth-child(even) { background-color: #f9f9f9; }
    </style>
</head>
<body>

    <h1>员工信息过滤</h1>

    <div class="filter-controls">
        <input type="text" class="filter-input" placeholder="按部门过滤 (如: 市场部)" data-filter-column="dept">
        <input type="text" class="filter-input" placeholder="按角色过滤 (如: 团队负责人)" data-filter-column="role">
        <button id="clearFilters">清除所有过滤</button>
    </div>

    <table id="myTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th data-column-name="dept">部门</th>
                <th data-column-name="role">角色</th>
            </tr>
        </thead>
        <tbody>
            <!-- 示例数据，实际应用中可能由PHP从数据库动态生成 -->
            <tr><td>1</td><td>张三</td><td>市场部</td><td>经理</td></tr>
            <tr><td>2</td><td>李四</td><td>销售部</td><td>主管</td></tr>
            <tr><td>3</td><td>王五</td><td>市场部</td><td>团队负责人</td></tr>
            <tr><td>4</td><td>赵六</td><td>研发部</td><td>工程师</td></tr>
            <tr><td>5</td><td>钱七</td><td>市场部</td><td>员工</td></tr>
            <tr><td>6</td><td>孙八</td><td>销售部</td><td>团队负责人</td></tr>
            <tr><td>7</td><td>周九</td><td>市场部</td><td>团队负责人</td></tr>
            <tr><td>8</td><td>吴十</td><td>销售部</td><td>经理</td></tr>
        </tbody>
    </table>

    <script>
        /**
         * 收集所有过滤输入框的值和对应的列名。
         * @returns {Array<Object>} 包含 { column: string, value: string } 对象的数组。
         */
        function getFilterCriteria() {
            const filterInputs = document.querySelectorAll('.filter-input');
            const criteria = [];
            filterInputs.forEach(input => {
                const column = input.getAttribute('data-filter-column');
                const value = input.value.trim().toLowerCase();
                if (column && value) { // 只有当列名和值都存在时才添加
                    criteria.push({ column, value });
                }
            });
            return criteria;
        }

        /**
         * 根据给定的过滤条件过滤表格。
         */
        function filterTable() {
            const table = document.getElementById('myTable');
            if (!table) return;

            const filterCriteria = getFilterCriteria();
            const rows = table.querySelectorAll('tbody tr');
            const headerCells = table.querySelectorAll('thead th');

            // 构建列名到索引的映射，以便根据data-filter-column快速找到列
            const columnIndexMap = {};
            headerCells.forEach((th, index) => {
                const colName = th.getAttribute('data-column-name');

登录后复制

以上就是实现基于多输入条件的JavaScript表格“与”逻辑过滤的详细内容，更多请关注php中文网其它相关文章！