如何用原生JavaScript实现动态HTML表格过滤功能？

来源：IPIPP.com作者：陈平安时间：05-22

导读：本期聚焦于小伙伴创作的《如何用原生JavaScript实现动态HTML表格过滤功能？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何用原生JavaScript实现动态HTML表格过滤功能？》有用，将其分享出去将是对创作者最好的鼓励。

动态HTML表格过滤教程：实现交互式数据搜索

在网页开发中，表格是展示结构化数据的常用方式，当表格数据量较大时，用户往往需要快速定位到目标内容，这时候给表格添加动态过滤功能就非常实用。本文会带大家一步步实现基于输入框的实时表格过滤效果，用户输入关键词后，表格会自动隐藏不匹配的行，只展示符合条件的数据。

实现原理

整个功能的实现逻辑并不复杂，核心可以分为三个步骤：

监听输入框的输入事件，获取用户输入的搜索关键词
遍历表格的所有数据行，提取每一行的文本内容
将每一行的文本内容和关键词做匹配，匹配成功的行显示，失败的行隐藏

这里我们用原生的JavaScript实现，不依赖任何第三方库，兼容性更好，也更适合新手理解核心逻辑。

基础HTML结构

首先我们需要准备一个基础的HTML页面，包含一个搜索输入框和一个待过滤的表格，表格中放一些示例数据方便测试。注意下面的HTML标签都做了正确的转义处理：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态表格过滤示例</title>
  <style>
    .search-box {
      margin: 20px 0;
      padding: 8px;
      width: 300px;
      font-size: 16px;
    }
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h3>员工信息表</h3>
  <!-- 搜索输入框 -->
  <input type="text" class="search-box" placeholder="输入关键词搜索表格内容">
  
  <!-- 待过滤的表格 -->
  <table id="dataTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>入职时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>技术部</td>
        <td>前端工程师</td>
        <td>2021-03-15</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>产品部</td>
        <td>产品经理</td>
        <td>2020-08-22</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>技术部</td>
        <td>后端工程师</td>
        <td>2022-01-10</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>运营部</td>
        <td>运营专员</td>
        <td>2021-11-05</td>
      </tr>
      <tr>
        <td>孙七</td>
        <td>技术部</td>
        <td>测试工程师</td>
        <td>2023-05-18</td>
      </tr>
    </tbody>
  </table>

  <script>
    // 这里后续会添加过滤逻辑
  </script>
</body>
</html>

上面的代码里我们定义了基础的样式，给隐藏的行添加了hidden类，后续通过控制这个类来切换行的显示和隐藏。表格的id设为dataTable，方便后续用JavaScript获取元素。

添加过滤逻辑

接下来我们编写核心的过滤函数，首先获取输入框和表格元素，然后给输入框绑定input事件，每次用户输入内容时都触发过滤逻辑：

// 获取输入框和表格元素
const searchInput = document.querySelector('.search-box');
const table = document.getElementById('dataTable');
const tbody = table.querySelector('tbody');
const rows = tbody.getElementsByTagName('tr');

// 定义过滤函数
function filterTable() {
  // 获取输入的关键词，转为小写方便不区分大小写匹配
  const keyword = searchInput.value.toLowerCase().trim();
  
  // 遍历所有表格行
  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    // 获取当前行的所有单元格文本，拼接成字符串
    const cells = row.getElementsByTagName('td');
    let rowText = '';
    for (let j = 0; j < cells.length; j++) {
      rowText += cells[j].textContent.toLowerCase();
    }
    
    // 判断关键词是否在行文本中，匹配则移除hidden类，否则添加
    if (rowText.includes(keyword)) {
      row.classList.remove('hidden');
    } else {
      row.classList.add('hidden');
    }
  }
}

// 绑定input事件，输入时实时触发过滤
searchInput.addEventListener('input', filterTable);

这段逻辑里我们做了几个优化：首先将关键词和行文本都转为小写，实现不区分大小写的搜索；其次用trim()方法去掉了输入首尾的空格，避免用户输入空格导致的匹配异常；最后通过classList操作hidden类，比直接修改style.display更符合样式和结构分离的原则。

功能优化

基础功能实现后，我们还可以做一些小优化，提升用户体验：

当搜索关键词为空时，显示所有行，这个逻辑已经在上面的代码里通过rowText.includes('')自动实现了，空字符串会匹配所有行
如果表格没有匹配结果，可以给用户一个提示，我们可以在表格下方添加一个提示元素，默认隐藏，没有匹配行时显示

下面是实现无结果提示的优化代码，只需要在原来的HTML和JS基础上修改即可：

<!-- 在表格后面添加无结果提示 -->
<div id="noResult" style="display: none; margin-top: 20px; color: #666; font-size: 14px;">
  没有找到匹配的结果
</div>

// 修改filterTable函数，添加无结果提示逻辑
function filterTable() {
  const keyword = searchInput.value.toLowerCase().trim();
  let hasVisibleRow = false; // 标记是否有可见行
  
  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    const cells = row.getElementsByTagName('td');
    let rowText = '';
    for (let j = 0; j < cells.length; j++) {
      rowText += cells[j].textContent.toLowerCase();
    }
    
    if (rowText.includes(keyword)) {
      row.classList.remove('hidden');
      hasVisibleRow = true;
    } else {
      row.classList.add('hidden');
    }
  }
  
  // 根据是否有可见行控制提示的显示隐藏
  const noResultTip = document.getElementById('noResult');
  if (hasVisibleRow || keyword === '') {
    noResultTip.style.display = 'none';
  } else {
    noResultTip.style.display = 'block';
  }
}

完整示例代码

把上面的所有代码整合起来，就是一个完整的可运行的动态表格过滤示例，你可以直接复制下面的代码保存为HTML文件，用浏览器打开测试：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态表格过滤示例</title>
  <style>
    .search-box {
      margin: 20px 0;
      padding: 8px;
      width: 300px;
      font-size: 16px;
    }
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h3>员工信息表</h3>
  <input type="text" class="search-box" placeholder="输入关键词搜索表格内容">
  
  <table id="dataTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>入职时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>技术部</td>
        <td>前端工程师</td>
        <td>2021-03-15</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>产品部</td>
        <td>产品经理</td>
        <td>2020-08-22</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>技术部</td>
        <td>后端工程师</td>
        <td>2022-01-10</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>运营部</td>
        <td>运营专员</td>
        <td>2021-11-05</td>
      </tr>
      <tr>
        <td>孙七</td>
        <td>技术部</td>
        <td>测试工程师</td>
        <td>2023-05-18</td>
      </tr>
    </tbody>
  </table>

  <div id="noResult" style="display: none; margin-top: 20px; color: #666; font-size: 14px;">
    没有找到匹配的结果
  </div>

  <script>
    const searchInput = document.querySelector('.search-box');
    const table = document.getElementById('dataTable');
    const tbody = table.querySelector('tbody');
    const rows = tbody.getElementsByTagName('tr');

    function filterTable() {
      const keyword = searchInput.value.toLowerCase().trim();
      let hasVisibleRow = false;
      
      for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.getElementsByTagName('td');
        let rowText = '';
        for (let j = 0; j < cells.length; j++) {
          rowText += cells[j].textContent.toLowerCase();
        }
        
        if (rowText.includes(keyword)) {
          row.classList.remove('hidden');
          hasVisibleRow = true;
        } else {
          row.classList.add('hidden');
        }
      }
      
      const noResultTip = document.getElementById('noResult');
      if (hasVisibleRow || keyword === '') {
        noResultTip.style.display = 'none';
      } else {
        noResultTip.style.display = 'block';
      }
    }

    searchInput.addEventListener('input', filterTable);
  </script>
</body>
</html>

这个示例的功能已经比较完善，你可以根据自己的需求修改表格内容、调整样式，或者扩展更多功能，比如支持按列搜索、多关键词搜索等，核心逻辑都是基于上面的内容做扩展即可。

动态表格过滤 JavaScript表格搜索前端交互实现 HTML表格优化 input事件监听本作品最后修改时间：2026-05-22 13:53:43

免责声明：网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。