Comment utiliser JavaScript pour implémenter la fonction de tri des tableaux ?

Comment utiliser JavaScript pour implémenter la fonction de tri des tableaux ?

Dans le développement Web moderne, les tableaux sont l'un des moyens courants d'afficher des données. Les tableaux de tri sont une fonction importante qui peut aider les utilisateurs à trouver rapidement des données pertinentes. Dans cet article, nous apprendrons comment implémenter la fonctionnalité de tri de tableaux à l'aide de JavaScript et fournirons des exemples de code spécifiques.

1. Préparation

Tout d'abord, nous avons besoin d'un tableau contenant des données. Supposons que notre tableau comporte trois colonnes, à savoir « Nom », « Âge » et « Ville ». Le code pour créer un tableau en HTML est le suivant :

<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>22</td>
      <td>广州</td>
    </tr>
    <!-- 更多的数据行... -->
  </tbody>
</table>

2. Implémenter le tri des tableaux

Ensuite, nous utiliserons JavaScript pour implémenter la fonction de tri des tableaux.

Tout d’abord, nous devons obtenir la référence au tableau. Nous pouvons utiliser la méthode getElementById pour obtenir l'élément de table. getElementById 方法来获得表格元素。

var table = document.getElementById("myTable");

然后，我们需要为表格的每一列添加点击事件，当用户点击某一列的表头时，将触发排序函数。

var th = table.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
  th[i].addEventListener("click", function() {
    sortTable(table, i);
  });
}

接下来，让我们实现排序函数 sortTable。该函数将接收两个参数，一个是表格元素，另一个是要排序的列的索引。

function sortTable(table, column) {
  var rows = Array.from(table.getElementsByTagName("tr"));

  rows.sort(function(a, b) {
    var cellA = a.getElementsByTagName("td")[column];
    var cellB = b.getElementsByTagName("td")[column];

    var valueA = cellA.innerText || cellA.textContent;
    var valueB = cellB.innerText || cellB.textContent;

    if (valueA < valueB) {
      return -1;
    } else if (valueA > valueB) {
      return 1;
    } else {
      return 0;
    }
  });

  for (var i = 0; i < rows.length; i++) {
    table.appendChild(rows[i]);
  }
}

在这个排序函数中，我们首先使用了 Array.from 方法将 HTMLCollection 类型的表格行转换为数组。然后，我们使用 sort 方法来对数组进行排序。排序操作使用了 innerText 或 textContent

  
  <script>
    function sortTable(table, column) {
      var rows = Array.from(table.getElementsByTagName("tr"));

      rows.sort(function(a, b) {
        var cellA = a.getElementsByTagName("td")[column];
        var cellB = b.getElementsByTagName("td")[column];

        var valueA = cellA.innerText || cellA.textContent;
        var valueB = cellB.innerText || cellB.textContent;

        if (valueA < valueB) {
          return -1;
        } else if (valueA > valueB) {
          return 1;
        } else {
          return 0;
        }
      });

      for (var i = 0; i < rows.length; i++) {
        table.appendChild(rows[i]);
      }
    }

    window.onload = function() {
      var table = document.getElementById(&quot;myTable&quot;);
      var th = table.getElementsByTagName("th");
      for (var i = 0; i < th.length; i++) {
        th[i].addEventListener("click", function() {
          sortTable(table, i);
        });
      }
    };
  </script>


  

    

      

        
姓名
        
年龄
        
城市
      
    
    

      

        
张三
        
25
        
北京
      
      

        
李四
        
30
        
上海
      
      

        
王五
        
22
        
广州
      
      
    
  

Ensuite, nous devons ajouter un événement click à chaque colonne du tableau. Lorsque l'utilisateur clique sur l'en-tête d'une colonne, la fonction de tri sera déclenchée.

rrreee

Ensuite, implémentons la fonction de tri sortTable. Cette fonction recevra deux paramètres, l'un est l'élément du tableau et l'autre est l'index de la colonne à trier.

rrreee

Dans cette fonction de tri, nous utilisons d'abord la méthode Array.from pour convertir les lignes d'un tableau de type HTMLCollection en un tableau. Ensuite, nous utilisons la méthode sort pour trier le tableau. L'opération de tri utilise l'attribut innerText ou textContent pour obtenir le contenu textuel de la cellule du tableau et le comparer. Enfin, nous rajoutons les lignes triées dans le tableau pour terminer le tri.

3. Exemple de code complet

Voici l'exemple de code complet :🎜rrreee🎜4. Conclusion🎜🎜Grâce à l'exemple de code ci-dessus, nous avons appris à utiliser JavaScript pour implémenter la fonction de tri de table. En ajoutant un événement click à l'en-tête du tableau et en appelant la fonction de tri dans le gestionnaire d'événements, nous pouvons implémenter la fonction de tri selon différentes colonnes. De cette façon, les utilisateurs peuvent facilement trier le tableau pour trouver plus rapidement les données cibles. J'espère que cet article vous sera utile, merci d'avoir lu ! 🎜

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!