tableau HTML à lister

En HTML, les tableaux sont souvent utilisés pour stocker et afficher des données. Cependant, afficher directement le tableau entraînera une mauvaise expérience utilisateur. Par conséquent, nous devons convertir le tableau HTML en une liste plus conviviale.

Le processus de conversion de tableaux HTML en listes peut être réalisé à l'aide de JavaScript et jQuery. Ce qui suit présentera en détail la méthode d'implémentation de conversion d'un tableau HTML en liste.

1. Définir un tableau HTML

Tout d'abord, nous devons définir un tableau HTML pour stocker les données. Voici un exemple simple de tableau HTML :

<ul id="array">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>西瓜</li>
</ul>

Ce tableau contient 4 éléments, à savoir des pommes, des bananes, des oranges et des pastèques.

2. Sélection d'éléments de tableau à l'aide des sélecteurs jQuery

Ensuite, nous devons utiliser les sélecteurs jQuery pour sélectionner les éléments du tableau. Pour le tableau HTML ci-dessus, nous pouvons utiliser le code suivant :

var arrayElements = $('#array li');

Cette ligne de code sélectionnera tous les éléments li et les stockera dans la variable arrayElements.

3. Parcourez les éléments du tableau et convertissez-les en liste

Ensuite, nous devons parcourir les éléments du tableau et les convertir en liste. Nous pouvons le faire en utilisant le code suivant :

var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

Tout d'abord, nous créons un élément de liste vide. Ensuite, nous utilisons la méthode each() pour parcourir les éléments li sélectionnés. Dans la boucle, nous créons un nouvel élément de liste pour chaque élément li et ajoutons son contenu textuel à l'élément de liste. Enfin, nous ajoutons les éléments de liste à l'élément de liste.

4. Remplacer le tableau d'origine

Enfin, nous devons remplacer le tableau HTML d'origine par la liste que nous venons de créer. Nous pouvons le faire en utilisant le code suivant :

$('#array').replaceWith(listElements);

Ce code prendra le tableau HTML d'origine et le remplacera par l'élément de liste que nous venons de créer.

Le code complet est le suivant :

var arrayElements = $('#array li');
var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

$('#array').replaceWith(listElements);

De cette façon, nous avons réussi à convertir le tableau HTML en une liste conviviale et à le présenter à l'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!