Je voudrais afficher le contenu d'un tableau sous forme de liste:

valeur

valeur

valeur

Cependant, il affiche actuellement le tableau comme ceci:

valeur, valeur, valeur

Que puis-je changer pour afficher le contenu du tableau sous forme de liste verticale?

Pour le contexte, cela affiche un tableau qui se met à jour en ajoutant / supprimant des éléments en fonction des connexions / déconnexions à un serveur. Ainsi, lorsqu'un utilisateur se connecte, son nom est ajouté à la baie, lorsqu'il se déconnecte, la baie est effacée et tous les clients connectés renvoient leur nom d'utilisateur à la baie, en le mettant à jour. Le code ci-dessous affiche simplement ces modifications.

HTML:

<section class="membersList">
  <div class="dispUser"></div>
</section>

CSS:

.membersList {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    background: #ACD8F0;
    width: 150px;
    border: 1px solid #000000;
    overflow: auto;
    float: right;
}

JavaScript:

socket.on('theitems', function (data) {
      $('.dispUser').html('<p>' + data + '</p>');
      console.log(data);
    });

Si je remplace .html par .append, il l'affichera sous forme de liste, mais affichera les changements du tableau au fur et à mesure qu'ils se produisent, plutôt que de le remplacer dans son ensemble, ce que je veux.

0
xstax 9 mai 2020 à 19:49

3 réponses

Vous pouvez utiliser une liste en html:

<div class="dispUser"><ul></ul></div>

var newitems = [];
socket.on('theitems', function (data) {
    newitems.push(data.user);
      $('.dispUser ul').html('<li>' + data + '</li>');
      console.log(data);
    });
0
Aurélien 9 mai 2020 à 16:54

Avez-vous essayé d'utiliser \ n c'est-à-dire un caractère de saut de ligne?

0
Rohan Nagmoti 9 mai 2020 à 17:06

Le problème est dans la méthode .html().

La méthode html() définit ou renvoie le contenu (innerHTML) des éléments sélectionnés.

Lorsque cette méthode est utilisée pour renvoyer du contenu, elle renvoie le contenu du PREMIER élément correspondant.

Vous devez ajouter l'élément pour ne pas modifier le contenu interne de celui-ci.

Essaye ça:

socket.on('theitems', function (data) {
      $('.dispUser').append('<p>' + data + '</p>');
 });
0
ggorlen 9 mai 2020 à 17:56