使用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>

接下來，我們需要一個輸入框，讓使用者輸入篩選條件。使用下面的程式碼新增一個輸入框：

<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中文網其他相關文章！