使用JavaScript实现表格筛选功能-js教程-PHP中文网

使用JavaScript实现表格筛选功能

WBOY

发布： 2023-08-10 21:51:21

原创

3122人浏览过

使用javascript实现表格筛选功能

使用JavaScript实现表格筛选功能

随着互联网技术的不断发展，表格成为了网页中常见的展示数据的方式。然而，当数据量庞大时，用户往往会面临找到特定数据的困难。因此，为表格添加筛选功能，让用户可以快速找到所需的数据，成为了很多网页设计的需求。本文将介绍如何使用JavaScript实现表格筛选功能。

首先，我们需要有一份表格数据。下面是一个简单的例子：

<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>男</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

登录后复制

接下来，我们需要一个输入框，供用户输入筛选条件。使用下面的代码添加一个输入框：

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

weenCompany闻名企业网站系统5.3.0 繁体中英文 UTF8

weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3

查看详情

<input type="text" id="filter-input" placeholder="输入筛选条件">

登录后复制

然后，我们需要编写JavaScript代码，来实现表格的筛选功能。代码如下：

// 获取数据表格和筛选输入框
const table = document.querySelector('#data-table');
const filterInput = document.querySelector('#filter-input');

// 监听筛选输入框的输入事件
filterInput.addEventListener('input', () => {
  const filterValue = filterInput.value.toLowerCase(); // 获取输入框的值并转为小写

  // 获取表格中的所有行
  const rows = table.getElementsByTagName('tr');

  // 遍历表格中的每一行，并根据筛选条件显示/隐藏行
  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    const dataCells = row.getElementsByTagName('td');
    let shouldShowRow = false;

    // 遍历当前行的每个单元格，检查是否有匹配的值
    for (let j = 0; j < dataCells.length; j++) {
      const cell = dataCells[j];
      const cellValue = cell.textContent.toLowerCase();

      // 如果单元格的值与筛选条件匹配，显示该行
      if (cellValue.includes(filterValue)) {
        shouldShowRow = true;
      }
    }

    // 根据shouldShowRow的值，显示/隐藏行
    if (shouldShowRow) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  }
});

登录后复制

现在，当用户在输入框中输入筛选条件时，表格会根据条件显示/隐藏相应的行。

本文介绍了如何使用JavaScript实现表格筛选功能。通过添加筛选输入框和编写相应的JavaScript代码，我们可以让用户方便地在表格中查找特定的数据。这对于大型表格的数据展示和查询具有很大的实用价值。希望本文对您有所帮助！

以上就是使用JavaScript实现表格筛选功能的详细内容，更多请关注php中文网其它相关文章！