Calculer les sommes des colonnes d'un tableau HTML

**Raptor92** · 04/02/2025, 16h54

Bonjour,

Le code joint fonctionne parfaitement dans le calcul des sommes par lignes, mais malgré mes nombreuses recherches, je n'arrive pas a trouver comment réaliser les totaux par colonnes
Pouvez-vous m'aider svp

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SIMAG-Gestion des articles</title>
  <link rel="stylesheet" href="css/components.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/responsee.css">
  <link rel="stylesheet" href="css/template-style.css">
  <link rel="stylesheet" href="css/pages.css">
  <link rel="stylesheet" href="css/general.css">
  <link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
 
  <!-- <script src="../js/clicDroit.js"></script> -->
  <script src="../js/script.js" defer></script>
  <title>Budget</title>
</head>
 
<body>
  <style>
    .tg {
      border-collapse: collapse;
    }
 
    .tg td {
      padding: .3em;
      border: 1px solid;
    }
 
    .tg tr {
      background-color: #e8ecfe;
      height: 30px;
    }
 
    .tg tr:nth-child(even) {
      background-color: #d1e4fb;
    }
 
    .tg thead th {
      background-color: #5998C9;
      color: white
    }
 
    .tg th {
      background-color: #93B9DC;
      color: white
    }
  </style>
  <script>
    // Afficher ou masquer le tableau des recettes
    var hide = true;
 
    function showcomment() {
      if (hide) {
        document.getElementById("zonecomment").style.display = 'block';
        hide = false;
      } else {
        document.getElementById("zonecomment").style.display = 'none';
        hide = true;
      }
    }
    // Afficher ou masquer le tableau des dépenses
    var hide = true;
 
    function showcomment1() {
      if (hide) {
        document.getElementById("zonecomment1").style.display = 'block';
        hide = false;
      } else {
        document.getElementById("zonecomment1").style.display = 'none';
        hide = true;
      }
    }
  </script>
 
 
 
  <a name="comment"></a>
  <a onclick="showcomment()" style="cursor:pointer">
    <div><button>+</button></div>
  </a>
  <div id="zonecomment" style="display:block">
    <table id="tableau" class="tg">
      <form name="recettes">
        <thead>
          <tr>
            <th>ID</th>
            <th>Libelle</th>
            <th>Janvier</th>
            <th>Février</th>
            <th>Mars</th>
            <th>Avril</th>
            <th>Mai</th>
            <th>Juin</th>
            <th>Total</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="8">Total recettes</td>
            <td><span id="total1" ></span></td>
          </tr>
        </tfoot>
        <tbody>
          <?php
          require_once '../pages/connexion/database.php';
          $categories = $pdo->query("SELECT RUB_ID,RUB_LIBELLE,RUB_CATEGORIE FROM RUBRIQUES
        WHERE RUB_CATEGORIE='RECETTES'")->fetchAll(PDO::FETCH_OBJ);
          foreach ($categories as $produit) {
          ?>
            <tr>
              <td><?= $produit->RUB_ID ?></td>
              <td><?= $produit->RUB_LIBELLE ?></td>
              <td class="valeur"><input type="text" name="f01" id="f01" value=""></td>
              <td class="valeur"><input type="text" name="f02" id="f02" value=""></td>
              <td class="valeur"><input type="text" name="fee3" id="f03" value=""></td>
              <td class="valeur"><input type="text" name="fee4" id="f04" value=""></td>
              <td class="valeur"><input type="text" name="fee5" id="f05" value=""></td>
              <td class="valeur"><input type="text" name="fee6" id="f06" value=""></td>
              <td class="somme"><input type="text" name="somme" id="somme" value="" readonly></td>
            </tr>
          <?php
          }
          ?>
        </tbody>
      </form>
    </table>
  </div>
  <!-- DEPENSES  -->
  <a name="comment1"></a>
  <a onclick="showcomment1()" style="cursor:pointer">
    <div><button>+</button></div>
  </a>
 
 
  <script>
 
// Calcul par lignes
    function recalcul(oEvent) {
      var oInput = oEvent.currentTarget,
        //Tr contenant la ligne d'inputs
        oTr = oInput.parentNode.parentNode,
        //Input qui va contenir la somme
        oSomme = oTr.querySelector(".somme [type='text']");
      if (isNaN(oInput.value) == true) {
        //Seulement si on est sure que la valeur initiale de l'inpuut est un chiffre
        oInput.value = oInput.defaultValue;
        //oInput.value = 0;
      } //if
      //Tableaus des inputs de la ligne
      var aInput = oTr.querySelectorAll(".valeur [type='text']");
      iNbInput = aInput.length, fSomme = 0;
      for (var i = 0; i < iNbInput; i++) {
        //Si la valeur de l'input n'est pas un chiffre
        if (isNaN(aInput[i].value) == true) {
          aInput[i].value = 0;
        } //if
        var fVal = aInput[i].value;
        fSomme += Number(fVal);
      } //for
      //Si somme n'est pas un chiffre
      //Normalement impossible
      if (isNaN(fSomme) == true) {
        fSomme = '';
      } //if
      oSomme.value = fSomme;
    } //fct
 
    document.addEventListener('DOMContentLoaded', function() {
      // //Assignation de l'écoute de l'événement
      var aInput = document.querySelectorAll(".valeur [type='text']"),
        iNbTr = aInput.length;
      for (var i = 0; i < iNbTr; i++) {
        aInput[i].addEventListener('keyup', recalcul);
        if (i % 3 == 2) {
          //lance la calcule de la ligne
          recalcul({
            currentTarget: aInput[i]
          });
        } //if
      } //for
    });
  </script>
 
</body>
 
</html>

Je suis débutant en JS et malgré mes lectures, je n'y arrive pas
Encore merci

**ABD-Z** · 04/02/2025, 17h13

bonjour,
J'ai déjà une erreur pour ajouter une ligne avec le bouton +

Uncaught TypeError: document.getElementById(...) is null

Si c'est pas le bouton +, je vois pas où est le problème. La colonne ne contient qu'un élément

**Raptor92** · 04/02/2025, 17h37

J'ai retiré la bouton qui ne sert qu'à afficher et masquer un autre tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!doctype html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SIMAG-Gestion des articles</title>
  <link rel="stylesheet" href="css/components.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/responsee.css">
  <link rel="stylesheet" href="css/template-style.css">
  <link rel="stylesheet" href="css/pages.css">
  <link rel="stylesheet" href="css/general.css">
  <link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
 
  <!-- <script src="../js/clicDroit.js"></script> -->
  <script src="../js/script.js" defer></script>
  <title>Budget</title>
</head>
 
<body>
  <style>
    .tg {
      border-collapse: collapse;
    }
 
    .tg td {
      padding: .3em;
      border: 1px solid;
    }
 
    .tg tr {
      background-color: #e8ecfe;
      height: 30px;
    }
 
    .tg tr:nth-child(even) {
      background-color: #d1e4fb;
    }
 
    .tg thead th {
      background-color: #5998C9;
      color: white
    }
 
    .tg th {
      background-color: #93B9DC;
      color: white
    }
  </style>
  <script>
    // Afficher ou masquer le tableau des recettes
    var hide = true;
 
    function showcomment() {
      if (hide) {
        document.getElementById("zonecomment").style.display = 'block';
        hide = false;
      } else {
        document.getElementById("zonecomment").style.display = 'none';
        hide = true;
      }
    }
    // Afficher ou masquer le tableau des dépenses
    var hide = true;
 
    function showcomment1() {
      if (hide) {
        document.getElementById("zonecomment1").style.display = 'block';
        hide = false;
      } else {
        document.getElementById("zonecomment1").style.display = 'none';
        hide = true;
      }
    }
  </script>
 
 
 
  <a name="comment"></a>
  <a onclick="showcomment()" style="cursor:pointer">
    <div><button>+</button></div>
  </a>
  <div id="zonecomment" style="display:block">
    <table id="tableau" class="tg">
      <form name="recettes">
        <thead>
          <tr>
            <th>ID</th>
            <th>Libelle</th>
            <th>Janvier</th>
            <th>Février</th>
            <th>Mars</th>
            <th>Avril</th>
            <th>Mai</th>
            <th>Juin</th>
            <th>Total</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="8">Total recettes</td>
            <td><span id="total1" ></span></td>
          </tr>
        </tfoot>
        <tbody>
          <?php
          require_once '../pages/connexion/database.php';
          $categories = $pdo->query("SELECT RUB_ID,RUB_LIBELLE,RUB_CATEGORIE FROM RUBRIQUES
        WHERE RUB_CATEGORIE='RECETTES'")->fetchAll(PDO::FETCH_OBJ);
          foreach ($categories as $produit) {
          ?>
            <tr>
              <td><?= $produit->RUB_ID ?></td>
              <td><?= $produit->RUB_LIBELLE ?></td>
              <td class="valeur"><input type="text" name="f01" id="f01" value=""></td>
              <td class="valeur"><input type="text" name="f02" id="f02" value=""></td>
              <td class="valeur"><input type="text" name="fee3" id="f03" value=""></td>
              <td class="valeur"><input type="text" name="fee4" id="f04" value=""></td>
              <td class="valeur"><input type="text" name="fee5" id="f05" value=""></td>
              <td class="valeur"><input type="text" name="fee6" id="f06" value=""></td>
              <td class="somme"><input type="text" name="somme" id="somme" value="" readonly></td>
            </tr>
          <?php
          }
          ?>
        </tbody>
      </form>
    </table>
  </div>
 
 
 
  <script>
 
// Calcul par lignes
    function recalcul(oEvent) {
      var oInput = oEvent.currentTarget,
        //Tr contenant la ligne d'inputs
        oTr = oInput.parentNode.parentNode,
        //Input qui va contenir la somme
        oSomme = oTr.querySelector(".somme [type='text']");
      if (isNaN(oInput.value) == true) {
        //Seulement si on est sure que la valeur initiale de l'inpuut est un chiffre
        oInput.value = oInput.defaultValue;
        //oInput.value = 0;
      } //if
      //Tableaus des inputs de la ligne
      var aInput = oTr.querySelectorAll(".valeur [type='text']");
      iNbInput = aInput.length, fSomme = 0;
      for (var i = 0; i < iNbInput; i++) {
        //Si la valeur de l'input n'est pas un chiffre
        if (isNaN(aInput[i].value) == true) {
          aInput[i].value = 0;
        } //if
        var fVal = aInput[i].value;
        fSomme += Number(fVal);
      } //for
      //Si somme n'est pas un chiffre
      //Normalement impossible
      if (isNaN(fSomme) == true) {
        fSomme = '';
      } //if
      oSomme.value = fSomme;
    } //fct
 
    document.addEventListener('DOMContentLoaded', function() {
      // //Assignation de l'écoute de l'événement
      var aInput = document.querySelectorAll(".valeur [type='text']"),
        iNbTr = aInput.length;
      for (var i = 0; i < iNbTr; i++) {
        aInput[i].addEventListener('keyup', recalcul);
        if (i % 3 == 2) {
          //lance la calcule de la ligne
          recalcul({
            currentTarget: aInput[i]
          });
        } //if
      } //for
    });
  </script>
 
</body>
 
</html>

Le problème reste entier

**ABD-Z** · 05/02/2025, 15h11

Alors je vois vraiment pas le problème, parce qu'il n'y qu'une seule ligne.. Je vois pas ce que tu veux faire

**Raptor92** · 05/02/2025, 15h23

Bonjour,

La requête me renvoi un certain nombre de ligne et cela me permet de budgéter chacune des catégories sur 12 mois de l'année. (seul 6 figurent pour l'exemple).
Lorsque je renseigne le tableau pour chaque ligne de catégorie (champs "libellé), le total se fait bien à la ligne.
Je souhaite également afficher le total par colonnes (pour chaque mois), et c'est là que j'ai un souci

Voici le résultat obtenu pour le moment

Nom : TABLEAU.jpg
Affichages : 139
Taille : 50,7 Ko

Nom : TABLEAU.jpg
Affichages : 139
Taille : 50,7 Ko

Merci

**ABD-Z** · 05/02/2025, 15h28

Envoyé par Raptor92

Bonjour,

La requête me renvoi un certain nombre de ligne et cela me permet de budgéter chacune des catégories sur 12 mois de l'année. (seul 6 figurent pour l'exemple).
Lorsque je renseigne le tableau pour chaque ligne de catégorie (champs "libellé), le total se fait bien à la ligne.
Je souhaite également afficher le total par colonnes (pour chaque mois), et c'est là que j'ai un souci

Voici le résultat obtenu pour le moment

Pièce jointe 664203

Merci

Bah déjà fait la structure HTML avec les colonnes... Parce qu'en fonction de comment tu gères, le code JS ne serait pas le même.

Envoie un code HTML avec plusieurs lignes

Calculer les sommes des colonnes d'un tableau HTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager