valeur médiane de la table de requête jquery

Dans le développement Web, les tableaux sont des éléments courants et importants. Comment interroger et filtrer les données des tableaux est une exigence courante. jQuery est une bibliothèque JavaScript très puissante qui fournit une multitude de sélecteurs et de méthodes de manipulation DOM. Cet article présentera l'utilisation de jQuery pour interroger des valeurs dans des tableaux.

1. Obtenir les données dans le tableau

Pour interroger les valeurs du tableau, vous devez d'abord obtenir les données dans le tableau. En utilisant jQuery, vous pouvez facilement obtenir des données à partir de tables.

Le code HTML est le suivant :

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>20</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

Le code utilisant jQuery pour obtenir les données de la table est le suivant :

var tableData = [];
$("#myTable tbody tr").each(function() {
  var rowData = [];
  $(this).find("td").each(function() {
    rowData.push($(this).text());
  });
  tableData.push(rowData);
});
console.log(tableData);

Code d'analyse : définissez d'abord un tableau vide tableData, puis utilisez la méthode each() pour parcourir chaque ligne (tr ) dans le tableau, pour chaque ligne. Utilisez ensuite la méthode find() pour parcourir chaque cellule (td) de la ligne et ajoutez le contenu textuel de la cellule au tableau rowData. Enfin, le tableau rowData est ajouté au tableau tableData, obtenant ainsi un tableau bidimensionnel, dans lequel chaque sous-tableau représente une ligne de données dans le tableau.

2. Interroger les données du tableau

L'interrogation des données du tableau comprend généralement deux aspects : la requête par ligne et la requête par colonne. Ces deux méthodes de requête seront présentées en détail ci-dessous.

2.1 Requête par ligne

La requête par ligne signifie interroger la ligne de données en fonction de la valeur d'une colonne du tableau. Par exemple, dans le tableau ci-dessus, vous souhaitez interroger des informations sur toutes les personnes vivant à « Londres ».

Le code HTML est le suivant :

<input type="text" id="searchInput">
<button id="searchBtn">Search</button>
<table id="myTable">
  <!-- 同上 -->
</table>

Le code pour interroger par ligne à l'aide de jQuery est le suivant :

$("#searchBtn").click(function() {
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var found = false;
    $(this).each(function() {
      if ($(this).text().toLowerCase().indexOf(searchText) >= 0) {
        found = true;
        return false;
      }
    });
    if (found) $(this).show();
    else $(this).hide();
  });
});

Code d'analyse : récupérez d'abord la valeur de la zone de texte utilisée pour la recherche et convertissez-la en lettres minuscules pour faciliter la comparaison ultérieure. . Parcourez ensuite chaque ligne du tableau, puis parcourez chaque cellule pour déterminer si la valeur de la cellule contient le mot-clé dans la zone de texte de recherche. Si trouvé, affichez la ligne, sinon masquez la ligne.

2.2 Requête par colonne

La requête par colonne signifie interroger les données de cette colonne en fonction de la valeur d'une certaine ligne du tableau. Par exemple, dans le tableau ci-dessus, vous souhaitez interroger les informations de toutes les personnes âgées de plus de 25 ans.

Le code HTML est le même que ci-dessus.

Le code pour interroger par colonne à l'aide de jQuery est le suivant :

$("#searchBtn").click(function() {
  var columnIndex = 1; //查询年龄这一列
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var tdValue = $(this).find("td:eq(" + columnIndex + ")").text();
    if (parseInt(tdValue) > parseInt(searchText)) $(this).show();
    else $(this).hide();
  });
});

Analyse du code : Définissez d'abord l'index (columnIndex) de la colonne à interroger comme 1, qui est la colonne d'âge. Obtenez ensuite la valeur de la zone de texte de recherche et convertissez-la également en lettres minuscules. Parcourez chaque ligne du tableau, obtenez la valeur de la colonne correspondante dans chaque ligne via la méthode eq() et convertissez-la en un type entier pour comparaison via la méthode parseInt(). Si les conditions sont remplies, la ligne de données est affichée, sinon la ligne de données est masquée.

3. Résumé

Cet article présente l'utilisation de jQuery pour interroger des données dans des tableaux, y compris l'interrogation par lignes et l'interrogation par colonnes. Grâce aux sélecteurs de jQuery et aux méthodes de fonctionnement du DOM, vous pouvez facilement interroger et filtrer les données des tables. Il convient de noter que lorsque la quantité de données de table est importante, les performances des requêtes peuvent être affectées et une solution appropriée doit être sélectionnée pour améliorer l'efficacité des requêtes.

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!