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

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

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

解决方案

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

1. HTML结构： 一个包含数据的

   <table>

   元素，一个用于输入搜索关键词的

   <input>

   元素。

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

   <input type="text" id="searchInput" placeholder="输入关键词搜索">
   <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>

2. 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';

     ： 隐藏行。

3. 优化：

   • 性能优化： 如果表格数据量很大，每次输入都遍历所有行会影响性能。可以考虑使用

     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表格搜索功能的性能，特别是当表格数据量很大时？

1. 节流 (Throttling)：

   使用

   setTimeout

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

   GentleAI

   GentleAI是一个高效的AI工作平台，为普通人提供智能计算、简单易用的界面和专业技术支持。让人工智能服务每一个人。

   下载

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

2. 分页 (Pagination)：

   如果表格数据量特别大，可以考虑分页显示。每次只显示一部分数据，减少需要搜索的数据量。

3. 虚拟DOM (Virtual DOM)：

   使用虚拟DOM技术，只更新需要改变的部分，避免整个表格的重新渲染。这需要使用一些前端框架，如React、Vue等。

4. 预处理数据：

   如果表格数据是静态的，可以在页面加载时预处理数据，例如将所有数据转换为小写，并存储在一个数组中。这样可以避免每次搜索都进行转换操作。

5. 使用Web Workers：

   将搜索逻辑放在Web Worker中执行，避免阻塞主线程，提高页面响应速度。

6. 减少DOM操作：

   尽量减少DOM操作。例如，可以先将需要显示的行存储在一个数组中，然后一次性更新表格。

7. 索引：

   如果搜索的字段是固定的，可以为这些字段创建索引，加快搜索速度。

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