Javascript: ajouter des lignes de somme dans des tables dynamiques

Cet article décrira comment utiliser JavaScript pour ajouter une ligne en bas d'une table HTML générée dynamiquement pour afficher la somme de chaque colonne. Nous allons modifier la fonction de génération de table existante, accumuler les valeurs de chaque colonne dans la boucle et ajouter ces valeurs de somme à la dernière ligne du tableau après la génération du tableau. Cette méthode convient aux débutants et fournit des exemples de code clairs et des instructions d'étape.

Étapes de mise en œuvre

Pour ajouter des lignes de somme au bas d'une table dynamique, il est principalement divisé en étapes suivantes:

1. Initialiser les variables accumulées: Au début de la fonction de génération de table, la variable utilisée pour stocker la somme de chaque colonne est initialisée.
2. Accumulation dans une boucle: Pendant le processus de génération de lignes de table dans une boucle, la valeur de chaque colonne est accumulée à la variable accumulée correspondante.
3. Générer des lignes de somme: une fois la boucle terminée, une nouvelle ligne de table est générée en utilisant les valeurs de la variable accumulée et ajoutée à la chaîne HTML du tableau.
4. Mettez à jour HTML: Mettez à jour la chaîne HTML de table complète à l'élément de page.

Exemple de code

Voici un exemple de code complet qui montre comment implémenter les étapes ci-dessus en JavaScript:

 fonction tablica () {
  var sum1 = 0, sum2 = 0, sum3 = 0; // Initialisez la variable accumulée var nr = document.getElementById ("broj"). Valeur;

  if (nr  <tr> <th> n </th> <th> n² </th> <th> n!  </th>
</tr>";
  var faktorijela = 1;

  pour (var i = 1; i  <td>" VAL1 "</td> <td>" VAL2 "</td> <td>" VAL3 "</td> ";

    sum1 = sum1 val1; // accumule la première colonne SUM2 = SUM2 Val2; // accumule la deuxième colonne SUM3 = SUM3 Val3; // accumule la troisième colonne}

  Rez = Rez "<tr> <td>" SUM1 "</td> <td>" SUM2 "</td> <td>" SUM3 "</td> </tr>"; // Générer les lignes de sommation Rez = Rez " Table>";

  var rezTablica = document.getElementById ("Rezultat");
  Reztablica.innerhtml = Rez;
}

 <input id="broj" type="text">
<button onclick="Tablica ()"> Tester 
<div id="Rezultat">
</div></button>

Explication du code

• SUM1, SUM2, SUM3 Variable: Utilisé pour stocker la somme de chaque colonne, initialisée à 0 au début de la fonction.
• Accumulation dans une boucle: dans A pour la boucle, chaque fois qu'une nouvelle ligne de table est générée, les valeurs de la colonne correspondante sont accumulées dans les variables SUM1, SUM2, SUM3.
• Génération de lignes de somme: Une fois la boucle terminée, utilisez les valeurs de SUM1, SUM2, SUM3 pour générer une nouvelle ligne de table "SUM1" "SUM2" "SUM3" "et l'ajouter à la chaîne HTML du tableau.
• Gestion des erreurs: Au début de la fonction, un jugement sur la valeur d'entrée est ajouté. S'il est inférieur à 2, la fonction est terminée à l'avance pour éviter de générer une table incorrecte.

Choses à noter

• Assurez-vous que la valeur saisie est de type numérique, sinon le résultat accumulé peut être incorrect. La valeur d'entrée peut être convertie en nombre à l'aide des fonctions parseInt () ou parsefloat ().
• Si le nombre de colonnes dans le tableau n'est pas fixe, vous pouvez utiliser un tableau pour stocker la somme de chaque colonne et générer dynamiquement les lignes de somme.
• Pour une meilleure expérience utilisateur, pensez à ajouter des styles CSS aux lignes de somme pour les distinguer des autres lignes. Par exemple, vous pouvez définir la couleur d'arrière-plan ou le style de police.
• Dans les applications pratiques, une vérification plus stricte des entrées peut être nécessaire pour empêcher les entrées malveillantes ou les données incorrectes de provoquer des accidents de programme.

Résumer

Cet article décrit comment utiliser JavaScript pour ajouter des lignes de somme au bas d'une table HTML générée dynamiquement. Cette fonction peut être facilement obtenue en initialisant la variable accumulée, en s'accumulant dans une boucle, en générant des lignes sommées et en mettant à jour le HTML. Les exemples de code sont clairs et faciles à comprendre et fournissent des considérations et des suggestions d'amélioration, dans l'espoir d'aider les lecteurs à mieux comprendre et appliquer la technologie.

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!