Trier un tableau html par colonnes avec des valeurs élevées, moyennes et faibles en utilisant javascript

Question

J'essaie de trier un tableau à l'aide de javascript, mais pas selon la méthode traditionnelle de tri numérique ou alphabétique. Chaque ligne du tableau comporte 3 TD. Le premier est le nom, le deuxième est un niveau (élevé, moyen, bas ou vide) et le troisième est également un niveau (élevé, moyen, bas ou vide). J'essaie de trier la table sur la base de la valeur des niveaux, élevé, moyen ou faible, et d'envoyer les TD vides vers le bas.

Je travaille normalement avec PHP et je suis donc un peu faible en ce qui concerne le javascript. Les bases de ce que j'essaie de faire :

Comptez le nombre de tr's en excluant le premier (car c'est l'en-tête). pour chaque tr, récupérez le innerHTML du second td. Comparez le innerHTML de chaque td et classez-les de haut en bas en mettant les vides en dernier. Si l'on clique à nouveau sur l'en-tête, on inverse.

Je pense que j'ai presque tout compris, mais je suis bloqué lorsqu'il s'agit de changer l'ordre des éléments.

<table id="myTable2">
<tr>
   <th>Food/Beverage</th> 
   <th onclick="sortTable(1)">Alkalizing Level</th>
   <th onclick="sortTable(2)">Acidic Level</th>
</tr>
<tr>
    <td>Ale (Dark)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
    <td>Ale (Pale)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
   <td>Alkaline, Ionized Water</td>
    <td>High</td>
   <td></td>
</tr>
<tr>
   <td>Almond Butter</td>
   <td>Medium</td>
   <td></td>
</tr>
<tr>
   <td>Almond Milk (unsweetened)</td>
   <td>Low</td>
   <td></td>
</tr>
<tr>
  <td>Almonds</td>
  <td>Medium</td>
  <td></td>
</tr>
<tr>
  <td>Amaranth Seeds</td>
  <td>Low</td>
  <td></td>
</tr>
<tr>
   <td>Apple Cider Vinegar</td>
   <td></td>
   <td>Low</td>
</tr>
<tr>
  <td>Apple Juice</td>
  <td></td>
  <td>High</td>
</tr>
<tr>
  <td>Apple Pie</td>
  <td></td>
  <td>High</td>
 </tr>
<tr>
  <td>Apples</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots (Dried)</td>
  <td></td>
  <td>High</td>
  </tr>
</table>

JS

<script>
table = document.getElementById("myTable2");    
rows = table.rows;
i = 1;
count = 0;
while(i < rows.length){
alkLevel = rows[i].getElementsByTagName("TD")[1].innerHTML;
alkLevelNext = rows[i+1].getElementsByTagName("TD")[1].innerHTML;
var alkLevelPosition = 0;

i++;
if(alkLevel === "High"){
    alkLevelPosition += 1;

}
if (alkLevel === "Medium"){
    alkLevelPosition += 2;

    }
if(alkLevel === "Low"){
    alkLevelPosition += 3;

   }
if(alkLevel === ""){
    alkLevelPosition += 4;

   }

    if (alkLevelPosition > alkLevelNext) {

      //shouldSwitch = true;

      //break;
    }

 }
</script>

Answer 1

Voici une approche pour obtenir le tri des tableaux que vous recherchez.

Ajout de récepteurs d'événements de clics pour les en-têtes de tableaux (plutôt que pour les en-têtes en ligne). onclick ), puis a déterminé quelle colonne contrôle le tri en utilisant l'approche suivante cellIndex et a inclus une fonction de tri qui gère correctement les scores élevés, moyens et faibles.

Chaque fois que l'on clique sur un en-tête, toutes les lignes du tableau (à l'exception de la ligne d'en-tête) sont supprimées, triées, puis ajoutées dans le nouvel ordre (ajouté thead y tbody pour simplifier les sélections) - en outre, une classe indiquant le sens du tri est ajoutée à l'élément d'en-tête correspondant afin que le tri suivant puisse être inversé.

J'ai également ajouté le tri alpha à la première colonne du tableau (afin de simplifier la sélection des éléments et la connexion des écouteurs d'événements).

const headings = document.querySelectorAll('#myTable th');
const tbody = document.querySelector('#myTable tbody');

const sortRows = (order, i) => {
  let rows = document.querySelectorAll('#myTable tbody tr');
  if (i === 0) {
    if (order === 'asc') {
      return Array.from(rows).sort();
    } else {
      return Array.from(rows).sort().reverse();
    }
  } else {
    return Array.from(rows).sort((a, b) => {
      let s = 0;
      let aval = a.cells[i].textContent;
      let bval = b.cells[i].textContent;
      if (aval === bval) {
        s = 0;
      } else if (aval === 'High') {
        s = 1;
      } else if (bval === 'High') {
        s = -1;
      } else if (aval === 'Medium') {
        s = 1;
      } else if (bval === 'Medium') {
        s = -1;
      } else if (aval === 'Low') {
        s = 1;
      } else if (bval === 'Low') {
        s = -1;
      }
      if (order === 'desc') {
        s *= -1;
      }
      return s;
    });
  }
}

for (let heading of headings) {
  heading.addEventListener('click', (event) => {
    let fragment = document.createDocumentFragment();
    let elem = event.target;
    let order = 'asc';
    if (elem.classList.contains('asc')) {
      order = 'desc';
      elem.classList.remove('asc');
      elem.classList.add('desc');
    } else {
      elem.classList.remove('desc');
      elem.classList.add('asc');
    }
    let sorted = sortRows(order, elem.cellIndex);
    for (let s of sorted) {
      fragment.appendChild(s);
    }
    while (tbody.firstChild) {
      tbody.removeChild(tbody.firstChild);
    }
    tbody.appendChild(fragment);
  });
}

th:hover {
  cursor: pointer;
}

<table id="myTable">
  <thead>
    <tr>
      <th>Food/Beverage</th>
      <th>Alkalizing Level</th>
      <th>Acidic Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ale (Dark)</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Ale (Pale)</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Alkaline, Ionized Water</td>
      <td>High</td>
      <td></td>
    </tr>
    <tr>
      <td>Almond Butter</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr>
      <td>Almond Milk (unsweetened)</td>
      <td>Low</td>
      <td></td>
    </tr>
    <tr>
      <td>Almonds</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr>
      <td>Amaranth Seeds</td>
      <td>Low</td>
      <td></td>
    </tr>
    <tr>
      <td>Apple Cider Vinegar</td>
      <td></td>
      <td>Low</td>
    </tr>
    <tr>
      <td>Apple Juice</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Apple Pie</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Apples</td>
      <td></td>
      <td>Medium</td>
    </tr>
    <tr>
      <td>Apricots</td>
      <td></td>
      <td>Medium</td>
    </tr>
    <tr>
      <td>Apricots (Dried)</td>
      <td></td>
      <td>High</td>
    </tr>
  </tbody>
</table>

Answer 2

Il semble donc que vous ayez simplement besoin d'aide pour interagir avec le DOM (Document Object Model). En regardant ce que vous avez écrit, cela semble bon jusqu'à présent, mais vous n'avez rien fait pour changer l'ordre dans lequel les balises sont rendues.

Il existe de nombreuses bibliothèques qui peuvent le faire pour vous, mais je vous recommande de faire vous-même quelques recherches sur JavaScript pour apprendre à manipuler le DOM (étant donné qu'il est fondamental pour ce que JavaScript fait dans le navigateur). À titre indicatif, je vous suggère de décomposer la tâche en étapes que le navigateur devra exécuter :

1. Isoler l'objet de la rangée (tout ce qui se trouve entre <tr></tr> ) en mémoire à partir du DOM.
2. Supprime l'objet row du DOM.
3. Ré-insérer l'objet row dans le DOM au bon endroit.

Ce lien de W3Schools fournit un bon exemple de la manière de procéder : https://www.w3schools.com/howto/howto_js_sort_table.asp

Ils proposent également un certain nombre de didacticiels et d'autres outils qui vous aideront à améliorer vos compétences en HTML et JavaScript, ainsi qu'en CSS (qui est très important pour les applications frontales). Bonne chance ! Faites-nous savoir si vous avez des questions !