使用纯JavaScript实现基于多条件输入的PHP生成表格筛选-php教程-PHP中文网

使用纯JavaScript实现基于多条件输入的PHP生成表格筛选

DDD

发布： 2025-09-05 11:53:02

原创

832人浏览过

使用纯JavaScript实现基于多条件输入的PHP生成表格筛选

本教程详细介绍了如何使用纯JavaScript实现对PHP动态生成的HTML表格进行多条件（AND逻辑）筛选。针对现有单条件筛选代码的局限性，文章提供了一种通过绑定多个输入框到特定列、并实时应用所有非空筛选条件来精确匹配表格行的解决方案，旨在提升用户体验和数据检索效率。

理解现有代码的局限性

在web开发中，我们经常需要对表格数据进行筛选，以帮助用户快速定位所需信息。当表格数据由php从数据库中获取并渲染到html页面后，客户端的筛选功能通常通过javascript实现。然而，如果现有javascript代码仅支持单个搜索输入框或在处理多个输入时采用“or”逻辑，那么在需要“and”逻辑（即所有条件都必须满足）的多条件筛选场景下，就会遇到挑战。

例如，原始代码可能存在以下问题：

单值限制： searchVal1 变量只能存储一个搜索值。当用户输入“marketing, team lead”时，它被视为一个整体字符串进行匹配，而非两个独立的条件。
全局文本匹配： row.textContent.toLowerCase().indexOf(sVal1) > -1 语句尝试在整个行文本内容中查找匹配项。如果用户期望按“部门”和“角色”分别筛选，这种全局匹配方式无法区分不同列的内容，也无法实现多个独立条件的组合匹配。
缺乏AND逻辑： 当尝试使用多个输入框时，如果代码没有明确实现，结果往往是“OR”逻辑，即只要满足任一条件就显示，而不是所有条件都满足才显示。

为了实现用户期望的“部门为 marketing 并且角色为 team lead”的精确筛选，我们需要重新设计JavaScript逻辑，使其能够识别多个独立的筛选条件，并将它们应用于表格的特定列，最终通过“AND”逻辑进行组合判断。

实现多条件筛选的核心思路

要实现基于多条件输入的表格筛选，并确保是“AND”逻辑，我们需要遵循以下核心思路：

明确输入与列的关联： 为每个筛选输入框指定其对应的表格列。这可以通过HTML的data-*属性（例如data-column-index）来实现，将输入框与表格中的特定列索引关联起来。
监听所有筛选输入： 无论哪个筛选输入框发生变化，都应触发一次完整的表格筛选操作。
收集所有活动的筛选条件： 在每次筛选操作开始时，遍历所有筛选输入框，收集非空的筛选值及其对应的列索引。
逐行进行多条件匹配： 遍历表格的每一行。对于每一行，检查它是否满足所有收集到的筛选条件。如果行中的对应列文本包含所有筛选值，则该行匹配成功。
应用AND逻辑： 只有当一行满足所有非空筛选条件时，才将其显示；否则，将其隐藏。

构建HTML结构

首先，我们需要一个由PHP生成的基础HTML表格，以及用于筛选的输入框。每个输入框都应通过data-column-index属性明确指定其关联的列（基于0的索引）。

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

飞书多维表格

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

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP表格多条件筛选</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        input[type="text"] { padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>

    <h1>员工信息筛选</h1>

    <div>
        <!-- 筛选输入框，通过 data-column-index 关联到表格列 -->
        <input type="text" id="idFilter" placeholder="按ID筛选" data-column-index="0">
        <input type="text" id="nameFilter" placeholder="按姓名筛选" data-column-index="1">
        <input type="text" id="deptFilter" placeholder="按部门筛选" data-column-index="2">
        <input type="text" id="roleFilter" placeholder="按角色筛选" data-column-index="3">
        <button id="clearFilters">清除筛选</button>
    </div>

    <table id="employeeTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>部门</th>
                <th>角色</th>
            </tr>
        </thead>
        <tbody>
            <!-- 以下内容通常由PHP从数据库动态生成 -->
            <tr>
                <td>101</td>
                <td>张三</td>
                <td>市场部</td>
                <td>团队负责人</td>
            </tr>
            <tr>
                <td>102</td>
                <td>李四</td>
                <td>销售部</td>
                <td>销售经理</td>
            </tr>
            <tr>
                <td>103</td>
                <td>王五</td>
                <td>市场部</td>
                <td>产品专员</td>
            </tr>
            <tr>
                <td>104</td>
                <td>赵六</td>
                <td>人事部</td>
                <td>团队负责人</td>
            </tr>
            <tr>
                <td>105</td>
                <td>钱七</td>
                <td>研发部</td>
                <td>高级工程师</td>
            </tr>
            <tr>
                <td>106</td>
                <td>孙八</td>
                <td>销售部</td>
                <td>销售代表</td>
            </tr>
        </tbody>
    </table>

    <script>
        // JavaScript 代码将在这里
    </script>

</body>
</html>

登录后复制

在上述HTML中：

我们创建了四个输入框，分别用于筛选ID、姓名、部门和角色。
每个输入框都有一个data-column-index属性，其值对应表格中列的0-based索引。例如，部门列是第三列，所以data-column-index="2"。
employeeTable是我们的目标表格，其内容假设由PHP生成。

编写JavaScript筛选逻辑

接下来是实现筛选功能的JavaScript代码。我们将使用纯JavaScript，不依赖任何库。

<script>
    (function() {
        const table = document.getElementById('employeeTable');
        // 如果表格不存在，则提前退出
        if (!table) {
            console.error("Table with ID 'employeeTable' not found.");
            return;
        }

        const tbody = table.querySelector('tbody');
        // 如果表格体不存在，也退出
        if (!tbody) {
            console.error("Table body not found in 'employeeTable'.");
            return;
        }
        const rows = tbody.rows; // 获取所有行，这是一个HTMLCollection

        // 选取所有带有 data-column-index 属性的输入框
        const filterInputs = document.querySelectorAll('input[data-column-index]');
        const clearButton = document.getElementById('clearFilters');

        /**
         * 执行表格筛选操作的函数
         */
        function filterTable() {
            const activeFilters = []; // 存储所有活动的筛选条件

            // 遍历所有筛选输入框，收集非空的筛选值及其对应的列索引
            filterInputs.forEach(input => {
                const columnIndex = parseInt(input.dataset.columnIndex, 10); // 获取列索引
                const value = input.value.trim().toLowerCase(); // 获取并处理输入值（去空格，转小写）

                if (!isNaN(columnIndex) && value) { // 确保列索引有效且输入值不为空
                    activeFilters.push({ columnIndex, value });
                }
            });

            // 如果没有活动的筛选条件，则显示所有行并退出
            if (activeFilters.length === 0) {
                Array.from(rows).forEach(row => {
                    row.style.display = ''; // 显示行
                });
                return;
            }

            // 遍历表格的每一行，进行匹配判断
            Array.from(rows).forEach(row => {
                let isMatch = true; // 假设当前行匹配所有条件

                // 遍历所有活动的筛选条件，检查当前行是否满足所有条件
                for (const filter of activeFilters) {
                    const cell = row.cells[filter.columnIndex]; // 获取当前条件对应的单元格

                    // 如果单元格存在且其文本内容包含筛选值，则继续检查下一个条件
                    if (cell && cell.textContent.toLowerCase().includes(filter.value)) {
                        // 条件满足，继续
                    } else {
                        // 任何一个条件不满足，则当前行不匹配，跳出循环
                        isMatch = false;
                        break;
                    }
                }

                // 根据匹配结果显示或隐藏行
                row.style.display = isMatch ? '' : 'none';
            });
        }

        /**
         * 清除所有筛选输入框并重新筛选表格
         */
        function clearAllFilters() {
            filterInputs.forEach(input => {
                input.value = ''; // 清空输入框
            });
            filterTable(); // 重新执行筛选，显示所有行
        }

        // 为每个筛选输入框添加 'input' 事件监听器
        filterInputs.forEach(input => {
            input.addEventListener('input', filterTable);
        });

        // 为清除按钮添加点击事件监听器
        if (clearButton) {
            clearButton.addEventListener('click', clearAllFilters);
        }

        // 页面加载时执行一次初始筛选，以防输入框有默认值
        filterTable();

    })();
</script>

登录后复制

代码解析

立即执行函数 (function(){...})()： 这是一个常见的JavaScript模式，用于创建私有作用域，避免全局变量污染。
获取DOM元素：
- table = document.getElementById('employeeTable')：获取表格元素。
- tbody = table.querySelector('tbody')：获取表格的<tbody>元素，因为我们主要操作行。
- rows = tbody.rows：获取<tbody>中的所有行，这是一个HTMLCollection。
- filterInputs = document.querySelectorAll('input[data-column-index]')：通过属性选择器获取所有带有data-column-index属性的输入框。
- clearButton = document.getElementById('clearFilters')：获取清除筛选按钮。
filterTable() 函数： 这是核心筛选逻辑的实现。
- activeFilters = []：初始化一个空数组，用于存储当前所有非空的筛选条件。每个条件是一个对象，包含columnIndex（列索引）和value（筛选值）。
- 收集筛选条件： 遍历filterInputs，对于每个输入框：
  - parseInt(input.dataset.columnIndex, 10)：从data-column-index属性中解析出列索引。
  - input.value.trim().toLowerCase()：获取输入值，去除两端空白，并转换为小写，以便进行不区分大小写的匹配。