Jquery recherche-t-il le contenu de la table ?

Les tableaux sont un moyen courant d'afficher des données lors de l'écriture d'applications Web. Souvent, ces tableaux contiennent de grandes quantités de données, ce qui oblige les utilisateurs à effectuer des recherches afin de filtrer les données spécifiques répondant à leurs besoins. Pour cela, nous pouvons utiliser jQuery pour implémenter la fonctionnalité de recherche de table.

Tout d'abord, nous devons créer un tableau en HTML et y ajouter des en-têtes et des lignes de données :

<table id="myTable">
  <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>
  </tbody>
</table>

Ensuite, nous devons écrire du code jQuery pour implémenter la fonction de recherche. Tout d'abord, nous convertissons le contenu de la table en tableau et l'enregistrons dans une variable :

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

Dans ce code, nous utilisons la méthode each de jQuery pour parcourir chaque ligne de la table et la convertir en un tableau avec 3 propriétés (nom, âge , genre). Parmi elles, nous utilisons la méthode eq pour obtenir la valeur d'index de chaque cellule et la méthode text pour obtenir le contenu du texte dans la cellule.

Ensuite, nous pouvons écrire une fonction de recherche qui filtre les données du tableau en fonction des mots-clés saisis par l'utilisateur. Dans cette fonction, nous avons utilisé la méthode grep de jQuery, qui peut être utilisée pour rechercher des éléments spécifiques dans un tableau :

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

Dans ce code, nous avons utilisé la méthode toLowerCase pour convertir les mots-clés et les données du tableau en lettres minuscules, implémentant ainsi la casse -recherches insensibles. Ensuite, nous utilisons la méthode indexOf pour rechercher les données de table contenant le mot-clé.

Enfin, nous devons lier un gestionnaire d'événements pour appeler la fonction de recherche et mettre à jour le contenu de la table lorsque l'utilisateur saisit un mot-clé :

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

Dans ce code, nous utilisons l'événement keyup pour écouter les entrées de l'utilisateur et obtenir le texte Mots-clés dans la boîte. Ensuite, nous appelons la fonction de recherche pour obtenir les données filtrées du tableau et les convertir en code HTML afin que le contenu du tableau puisse être mis à jour.

En résumé, nous avons utilisé jQuery pour écrire un morceau de code permettant d'implémenter la fonction de recherche de table basée sur des mots-clés. De cette manière, les utilisateurs peuvent facilement trouver des données spécifiques, améliorant ainsi la convivialité du système et l’expérience utilisateur.

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!