Utiliser JavaScript pour implémenter la fonction de filtrage de table

Utilisez JavaScript pour implémenter la fonction de filtrage des tableaux

Avec le développement continu de la technologie Internet, les tableaux sont devenus un moyen courant d'afficher des données sur les pages Web. Cependant, lorsque la quantité de données est énorme, les utilisateurs ont souvent du mal à trouver des données spécifiques. Par conséquent, l’ajout de fonctions de filtrage aux tableaux afin que les utilisateurs puissent trouver rapidement les données requises est devenu une exigence pour de nombreuses conceptions Web. Cet article explique comment utiliser JavaScript pour implémenter la fonction de filtrage de table.

Tout d’abord, nous devons avoir un tableau de données. Voici un exemple simple :

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

Ensuite, nous avons besoin d'une zone de saisie permettant aux utilisateurs de saisir les conditions de filtre. Utilisez le code suivant pour ajouter une zone de saisie :

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

Ensuite, nous devons écrire du code JavaScript pour implémenter la fonction de filtrage de la table. Le code est le suivant :

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

Maintenant, lorsque l'utilisateur saisit les conditions de filtre dans la zone de saisie, le tableau affichera/masquera les lignes correspondantes en fonction des conditions.

Cet article explique comment utiliser JavaScript pour implémenter la fonction de filtrage de table. En ajoutant des zones de saisie de filtre et en écrivant le code JavaScript correspondant, nous pouvons permettre aux utilisateurs de trouver facilement des données spécifiques dans le tableau. Cela présente une grande valeur pratique pour l’affichage des données et l’interrogation de grandes tables. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!