Comment additionner le contenu d'une colonne d'un tableau HTML en JavaScript ?

Question

Bonjour, j'ai un tableau HTML avec plusieurs lignes <tr> et plusieurs colonnes <td>. La première colonne du tableau contient des chiffres. Comment faire pour additionner tous les chiffres de la colonne en JavaScript ?

Answer 1

Vous pouvez utiliser la fonction JavaScript suivante pour additionner le contenu d'une colonne d'un tableau HTML.

Remarque : dans l'exemple ci-dessous le tableau HTML a un ID <table id="exemple"> :

function additionColonne(numColonne) {
  var tableau = document.getElementById("exemple");
  let totalColonne = Array.from(tableau.rows).slice(1).reduce((total, row) => {
    return total + parseFloat(row.cells[numColonne].innerHTML);
  }, 0);
  alert(totalColonne.toFixed(2));
}

additionColonne(0);

Remarque : ici on additionne le contenu de la première colonne additionColonne(0) ; remplacez 0 par 1 pour la seconde colonne, 2 pour la troisième colonne, etc.

Comments

Bonjour,
Si j'utilise la librairie DataTables pour ordonner mon tableau, votre fonction additionColonne n'additionne que ce qui est visible à l’écran.
Si j'affiche 10 items / page, alors que je suis à
Page x sur 342, avec 3,414 résultats au total

Il me fait bien le total mais seulement des 10 items et non pas des 3414 .

---

C'est normal car DataTables met à jour le contenu DOM de la table à chaque filtre ou ordonnancement, donc seules les lignes affichées à l'écran sont dans le DOM. Si tu veux additionner toutes les valeurs d'une colonne, même celles qui ne sont pas affichées, tu dois utiliser le plugin développé à cet effet : https://datatables.net/plug-ins/api/sum()