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.
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>
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("myTable"); 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 | 广州 |
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éthodeArray.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 completVoici 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!