Tri des colonnes d'un tableau par ordre alphabétique

[Katerinata]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 18/08/2018
Lien du forum : http://www.lights-camera-action.org/

Description du problème

Bonjour, et merci d'avance à ceux qui se pencheront sur mon problème !

Je suis une codeuse amatrice, donc n'hésitez pas à m'expliquer d'où vient mon erreur. Je viens en autre pour comprendre ce que j'ai raté.

Mon but est de coder un tableau, sur lequel je peux cliquer sur les titres des différents colonnes pour les ordonner par ordre alphabétique. J'ai fait mes petites recherches, et j'en suis arrivée à ce code javascript :

Code:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;     
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

avec ce code html :

Code:

<table id="myTable">
<tr><th onclick="sortTable(0)" style="cursor: pointer;">Fruit</th><th onclick="sortTable(1)" style="cursor: pointer;">Color</th>
<th onclick="sortTable(2)" style="cursor: pointer;">Country</th><th onclick="sortTable(3)" style="cursor: pointer;">Flavor</th></tr>
<tr><td>Strawberry</td><td>Red</td><td>France</td><td>Sweet</td></tr>
<tr><td>Lemon</td><td>Yellow</td><td>Italy</td><td>Sour</td></tr>
<td>Blueberry</td><td>Purple</td><td>Spain</td><td>Bitter</td></tr>
</table>

Lorsque je fais fonctionner ces deux codes ensemble sur une page HTML dans la fonction modules de mon forum, je n'ai aucun problème, tout fonctionne en ordre. Par contre, quand je veux le poster dans un topic, ça ne semble pas marcher.

Je précise qu'une grosse partie de mes templates ont subi des changements, au cas où ça pourrait avoir une incidence sur le dysfonctionnement de ce code.

Merci à tous ceux qui passeront pour me donner des conseils, voire une solution !

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif


Pourriez vous nous communiquer le code que vous essayez de placer dans un message ?

[Katerinata]

Bonjour ! Et merci de tenter de résoudre mon problème

Voici le code. J'ai hébergé le code javascript par soucis de place, mais c'est exactement le même que celui qui est posté plus haut.

Code:

<script type="text/javascript" src="http://files.jcink.net/uploads/lipatatornestuff/alphabetborder.js" ></script>
<table id="myTable">
<tr><th onclick="sortTable(0)" style="cursor: pointer;">Fruit</th><th onclick="sortTable(1)" style="cursor: pointer;">Color</th>
<th onclick="sortTable(2)" style="cursor: pointer;">Country</th><th onclick="sortTable(3)" style="cursor: pointer;">Flavor</th></tr>
<tr><td>Strawberry</td><td>Red</td><td>France</td><td>Sweet</td></tr>
<tr><td>Lemon</td><td>Yellow</td><td>Italy</td><td>Sour</td></tr>
<td>Blueberry</td><td>Purple</td><td>Spain</td><td>Bitter</td></tr>
</table>

[Neptunia]

C'est bien ce que je pensais !

Pour des raisons de sécurité, le javascript n'est pas autorisé dans les messages. Vous ne pouvez donc pas utiliser de onclick="..." ni de balises <script> dans votre message.

La méthode la plus simple qui me vienne à l'esprit passe par une iframe.

Démonstration :

[Katerinata]

Bonjour !

L'astuce que j'ai trouvé lorsque je rencontre ce genre de problème, c'est d'intégrer directement le code javascript dans mes templates, par exemple, le overall_header si je veux que le code javascript fonctionne sur toutes les pages de mon forum.

D'habitude, ça fonctionne plutôt bien. Mais rien à faire, ce coup-ci. Étrange.

Je commence à penser que ce serait peut-être tout simplement le onclick qui n'est également pas autorisé, outre le fait que le code javascript ne peut-être intégré directement dans mon message ?

[Neptunia]

Je commence à penser que ce serait peut-être tout simplement le onclick qui n'est également pas autorisé, outre le fait que le code javascript ne peut-être intégré directement dans mon message ?

Bah vi je fais quasiment pareil. Quand il s'agit d'intégrer un code qui comporte du javascript (intégration de tweets par exemple), je place la partie html dans le message et le script dans la gestion des codes javascript sur les sujets (ou sur toutes les pages si ça doit fonctionner en prévisualisation).

Comme vous le soulignez le problème vient du onclick, et là je ne sais pas comment procéder pour le sortir du message et l'ajouter autrement. Je ne suis même pas certaine que cela soit possible.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.