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

Réponses rédigées par Antoine
Dernière mise à jour : 2022-05-29 12:27:47
Thèmes : addition - tableau - colonne - html - 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 ?

Réponse

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.