Verwendung von JavaScript zur Implementierung der Tabellenfilterfunktion

Verwenden Sie JavaScript, um die Tabellenfilterfunktion zu implementieren.

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie sind Tabellen zu einer gängigen Methode zur Anzeige von Daten auf Webseiten geworden. Bei großen Datenmengen haben Benutzer jedoch häufig Schwierigkeiten, bestimmte Daten zu finden. Daher ist das Hinzufügen von Filterfunktionen zu Tabellen, damit Benutzer die benötigten Daten schnell finden können, für viele Webdesigns zu einer Anforderung geworden. In diesem Artikel wird erläutert, wie Sie mit JavaScript die Tabellenfilterfunktion implementieren.

Zuerst benötigen wir eine Datentabelle. Hier ist ein einfaches Beispiel:

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

Als nächstes benötigen wir ein Eingabefeld, in das Benutzer Filterbedingungen eingeben können. Verwenden Sie den folgenden Code, um ein Eingabefeld hinzuzufügen:

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

Dann müssen wir JavaScript-Code schreiben, um die Filterfunktion der Tabelle zu implementieren. Der Code lautet wie folgt:

// 获取数据表格和筛选输入框
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';
    }
  }
});

Wenn der Benutzer nun Filterbedingungen in das Eingabefeld eingibt, zeigt/versteckt die Tabelle die entsprechenden Zeilen basierend auf den Bedingungen.

In diesem Artikel wird erläutert, wie Sie mit JavaScript die Tabellenfilterfunktion implementieren. Durch das Hinzufügen von Filtereingabefeldern und das Schreiben von entsprechendem JavaScript-Code können wir es Benutzern erleichtern, bestimmte Daten in der Tabelle zu finden. Dies hat einen großen praktischen Nutzen für die Datenanzeige und Abfrage großer Tabellen. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript zur Implementierung der Tabellenfilterfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!