首页 > 文章 > 前端

HTML表格搜索功能实现教程

时间：2025-10-18 08:53:48 105浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《HTML表格添加搜索功能教程》，涉及到，有需要的可以收藏一下

HTML表格搜索功能可通过前端JS实现，核心是监听输入框事件，遍历表格行并匹配关键词。模糊匹配使用includes方法判断行内容是否包含关键词，精确匹配则用正则表达式^keyword$确保完全一致。为提升性能，可采用节流（setTimeout）、分页、虚拟DOM、Web Workers等技术减少计算压力。多列搜索通过指定列索引数组，仅在目标列中查找关键词，任一列匹配即显示该行。

HTML表格搜索功能怎么加_HTML表格添加搜索筛选功能教程

HTML表格添加搜索功能，本质上就是让用户能够根据关键词快速筛选表格中的数据。实现方式有很多，最简单的是前端JS实现，复杂一点的可以用后端配合数据库。这里主要讲前端JS实现，因为它足够简单，也足够应对大部分场景。

解决方案

核心思路：获取用户输入的关键词，遍历表格每一行，检查该行是否包含关键词。如果包含，则显示该行；否则，隐藏该行。

HTML结构： 一个包含数据的

元素，一个用于输入搜索关键词的<input>元素。

&lt;input type=&quot;text&quot; id=&quot;searchInput&quot; placeholder=&quot;输入关键词搜索&quot;&gt;
<table id="dataTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>产品经理</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>32</td>
      <td>程序员</td>
    </tr>
  </tbody>
</table>

JavaScript代码： 监听<input>元素的input事件，每次输入内容都触发搜索函数。

const searchInput = document.getElementById('searchInput');
const dataTable = document.getElementById('dataTable');
const tableRows = dataTable.getElementsByTagName('tr');

searchInput.addEventListener('input', function() {
  const searchTerm = searchInput.value.toLowerCase();

  for (let i = 1; i < tableRows.length; i++) { // 从1开始，跳过表头
    const row = tableRows[i];
    const rowData = row.textContent.toLowerCase();

    if (rowData.includes(searchTerm)) {
      row.style.display = ''; // 显示行
    } else {
      row.style.display = 'none'; // 隐藏行
    }
  }
});

解释：

searchInput.addEventListener('input', function() { ... });：监听输入框的内容变化。
searchTerm = searchInput.value.toLowerCase();：获取输入框的值，并转换为小写，方便后续比较。
for (let i = 1; i < tableRows.length; i++) { ... }：循环遍历表格的每一行，注意从1开始，跳过表头。
rowData = row.textContent.toLowerCase();：获取当前行的所有文本内容，并转换为小写。
rowData.includes(searchTerm)：检查当前行的文本内容是否包含搜索关键词。
row.style.display = '';：显示行。
row.style.display = 'none';：隐藏行。

优化：

性能优化： 如果表格数据量很大，每次输入都遍历所有行会影响性能。可以考虑使用setTimeout函数进行节流，或者使用虚拟DOM等技术。
精确匹配： 目前是模糊匹配，如果需要精确匹配，可以使用正则表达式。
多列搜索： 可以指定搜索哪几列，而不是搜索所有列。

HTML表格搜索功能如何实现模糊匹配和精确匹配？

模糊匹配：

上面提供的代码就是模糊匹配，rowData.includes(searchTerm) 检查 rowData 是否包含 searchTerm，只要包含就显示该行。

精确匹配：

精确匹配需要使用正则表达式。

searchInput.addEventListener('input', function() {
  const searchTerm = searchInput.value.toLowerCase();

  for (let i = 1; i < tableRows.length; i++) {
    const row = tableRows[i];
    let isMatch = false;

    // 遍历当前行的所有单元格
    const cells = row.getElementsByTagName('td');
    for (let j = 0; j < cells.length; j++) {
      const cellText = cells[j].textContent.toLowerCase();
      // 使用正则表达式进行精确匹配
      const regex = new RegExp('^' + searchTerm + '$'); // ^表示开头，$表示结尾
      if (regex.test(cellText)) {
        isMatch = true;
        break; // 找到匹配的单元格，跳出内层循环
      }
    }

    if (isMatch) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  }
});

解释：

const regex = new RegExp('^' + searchTerm + '$');：创建一个正则表达式，^ 表示字符串的开头，$ 表示字符串的结尾，这样就实现了精确匹配。
regex.test(cellText)：使用正则表达式测试单元格的文本内容是否匹配。
修改后的代码会遍历每一行的每一个单元格，只有当单元格的内容与搜索关键词完全一致时，才会显示该行。

如何优化HTML表格搜索功能的性能，特别是当表格数据量很大时？

节流 (Throttling)：

使用 setTimeout 函数，在用户停止输入一段时间后才执行搜索。这样可以避免每次输入都触发搜索，减少计算量。

let timeoutId;
searchInput.addEventListener('input', function() {
  clearTimeout(timeoutId); // 清除之前的定时器
  timeoutId = setTimeout(() => {
    const searchTerm = searchInput.value.toLowerCase();
    // 执行搜索逻辑
    // ... (之前的搜索代码)
  }, 300); // 300毫秒后执行搜索
});

分页 (Pagination)：
如果表格数据量特别大，可以考虑分页显示。每次只显示一部分数据，减少需要搜索的数据量。
虚拟DOM (Virtual DOM)：
使用虚拟DOM技术，只更新需要改变的部分，避免整个表格的重新渲染。这需要使用一些前端框架，如React、Vue等。
预处理数据：
如果表格数据是静态的，可以在页面加载时预处理数据，例如将所有数据转换为小写，并存储在一个数组中。这样可以避免每次搜索都进行转换操作。
使用Web Workers：
将搜索逻辑放在Web Worker中执行，避免阻塞主线程，提高页面响应速度。
减少DOM操作：
尽量减少DOM操作。例如，可以先将需要显示的行存储在一个数组中，然后一次性更新表格。
索引：
如果搜索的字段是固定的，可以为这些字段创建索引，加快搜索速度。

HTML表格搜索功能如何实现多列搜索，例如同时搜索姓名和职业？

修改JavaScript代码，使其能够同时搜索多个列。

searchInput.addEventListener('input', function() {
  const searchTerm = searchInput.value.toLowerCase();

  for (let i = 1; i < tableRows.length; i++) {
    const row = tableRows[i];
    let isMatch = false;

    // 指定要搜索的列的索引
    const searchColumns = [0, 2]; // 0: 姓名, 2: 职业

    for (let j = 0; j < searchColumns.length; j++) {
      const columnIndex = searchColumns[j];
      const cell = row.getElementsByTagName('td')[columnIndex];
      if (cell) {
        const cellText = cell.textContent.toLowerCase();
        if (cellText.includes(searchTerm)) {
          isMatch = true;
          break; // 找到匹配的列，跳出内层循环
        }
      }
    }

    if (isMatch) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  }
});

解释：

const searchColumns = [0, 2];：定义一个数组，指定要搜索的列的索引。这里0代表姓名列，2代表职业列。
for (let j = 0; j < searchColumns.length; j++) { ... }：循环遍历要搜索的列。
const cell = row.getElementsByTagName('td')[columnIndex];：获取指定列的单元格。
修改后的代码只会搜索指定的列，只要其中一列包含搜索关键词，就会显示该行。

可以将searchColumns改成可以配置的，让用户选择需要搜索的列。

理论要掌握，实操不能落！以上关于《HTML表格搜索功能实现教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

JavaScript 性能优化模糊匹配精确匹配 HTML表格搜索