Comment résumer un tableau en utilisant JavaScript

Avec le développement d'Internet, de plus en plus de sites Web doivent utiliser des tableaux pour afficher les données. Dans les tableaux, la sommation est une opération très basique. En JavaScript, nous pouvons utiliser des boucles pour implémenter la fonctionnalité de sommation de tableaux. Cet article explique comment additionner des tableaux à l'aide de JavaScript.

Structure des tableaux HTML

Avant de présenter comment additionner des tableaux, comprenons d'abord la structure des tableaux en HTML.

Nom	Âge	Réalisations
Xiao Ming	18	85
Xiaohong	19	90
Xiao Gang	20	80

Comme indiqué ci-dessus, un tableau HTML de base se compose des éléments table, thead, tbody, tr, th et td.

Parmi eux, table représente le tableau entier, thead représente l'en-tête du tableau, tbody représente le corps du tableau, tr représente une ligne de données, th représente la cellule d'en-tête et td représente la cellule de données.

Implémentation de la sommation de table JavaScript

Ensuite, nous présenterons comment utiliser JavaScript pour implémenter la fonction de sommation de table.

Tout d’abord, nous devons trouver les cellules de données du tableau qui doivent être additionnées. Dans l'exemple ci-dessus, nous devons additionner les notes. Nous pouvons utiliser le code suivant pour obtenir les cellules de score :

const scores = document.querySelectorAll('table tbody tr td:nth-child(3)');

Dans le code ci-dessus, la fonction querySelectorAll peut obtenir toutes les tables élément td dans . Parmi eux, :nth-child(3) signifie obtenir le troisième élément td de chaque ligne, c'est-à-dire la cellule de note.

Ensuite, nous devons parcourir les cellules de note obtenues et additionner chaque valeur. Le code est le suivant :

let sum = 0;
scores.forEach((score) => {
sum += Number(score.innerText);
});

Dans le code ci-dessus, nous utilisons le fonction forEach, toutes les cellules de note sont parcourues et chaque valeur est accumulée dans la variable de somme. Il convient de noter que puisque innerText renvoie une valeur de type chaîne, vous devez utiliser la fonction Number pour la convertir en type numérique.

Enfin, il suffit d'afficher la valeur de la somme sur la page. Le code est le suivant :

const result = document.createElement('div');
result.innerText = 总分：${sum};
document.body.append(result);

Grâce au code ci-dessus, nous pouvons implémenter les colonnes spécifiées dans la fonction Somme du tableau.

Résumé

Cet article explique comment utiliser JavaScript pour effectuer des opérations de somme sur des tableaux HTML. En trouvant les éléments qui doivent être additionnés, en utilisant des opérations de parcours et d'accumulation, et enfin en affichant les résultats du calcul sur la page, une simple opération de somme. est mis en œuvre.

Le fonctionnement des tables est une partie essentielle du développement Web, et la maîtrise de ces connaissances est cruciale pour améliorer l'efficacité du développement. Le contenu présenté dans cet article peut aider les lecteurs à mieux comprendre l'application de JavaScript dans le traitement des données tabulaires, et également aider les lecteurs à mieux comprendre d'excellentes idées pratiques pour le développement JavaScript, afin de mieux développer d'excellentes applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!