Jquery min values depuis table html

Version imprimable

Salut à tous, pour un projet, j'ai une table html générée avec du php depuis curl

J'ai besoin d'en extraire quelques statistiques comme : la valeur minimale, maximale ainsi que la moyenne d'une colonne spécifique. Toutes les colonnes ont un td id. Je pensais que le plus pratique serais jquery

Voici la table:

Code:

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
table id='table'
 
//title line
echo ("<tr id='title'><td id ='orderNo'>orderNo</td><td id ='orderDate'>orderDate</td><td id ='yourReference'>yourReference</td><td id ='Reference'>Reference</td><td id ='projectName'>projectName</td><td id ='statusId'>statusId</td><td id ='statusText'>statusText</td><td id ='shippedOn'>shippedOn</td><td id ='deliveredOn'>deliveredOn</td><td id ='signedBy'>(POD) signedBy</td><td id ='days'>Number of days</td><td id ='packages'>Number of packages</td><td id ='netWeight'>netWeight</td></tr>");
 
//content line (in a foreach loop)
echo ("<tr><td>".$order."</td><td>".$orderDate."</td><td>".$references."</td><td>".$yourReference."</td><td>".$projectName."</td><td>".$statusId."</td><td>".$statusText."</td><td>".$shippedOn."</td><td>".$deliveredOn."</td><td>".$signedBy."</td><td>".$diffDate."</td><td>".$quantity."</td><td>".$netWeight." Kg</td></tr>"); 
 
Les valeures dans la colonne "days" sont obtenues par la soustraction de "shippedOn et deliveredOn"; soit :
 
if(isset($result['results'][$i]["shippedOn"])){
                        $shippedOn = $result['results'][$i]["shippedOn"];
                    }else{
                        $shippedOn = "0";
                    }
                    if(isset($result['results'][$i]["deliveredOn"])){
                        $deliveredOn = $result['results'][$i]["deliveredOn"];
                    }else{
                        $deliveredOn = "0";
                    }
 
                    //Calcul de la différence entre $shippedOn et $deliveredOn
                    $debut = strtotime($shippedOn);
                    $fin = strtotime($deliveredOn);
                    $diffDate = ceil(abs($fin - $debut) / 86400);

Les données dont j'ai besoins, sont : minimum, maximum et moyenne pour la colonne "Number of days"

Comme puis-je le faire ?

Merci d'avance

21/09/2022, 15h09
mathieu

le javascript standard utilisable dans tous les navigateurs a beaucoup évolué ces dernières années donc je pense que vous n'avez pas besoin d'utiliser jquery pour cela, le code javascript de base suffira.

de plus, vous nous montrez du code php, donc vous pouvez peut-être faire ce calcul en php ?
regardez là : https://www.php.net/manual/fr/function.min.php
22/09/2022, 14h32
math11

1 pièce(s) jointe(s)

Merci Mathieu,

J'ai suivi un tuto qui fait exactement ce dont j'ai besoin (https://1bestcsharp.blogspot.com/201...n-sum-avg.html), mais...

Voici le résultat en image
Pièce jointe 625926

Dans la colonne "number of days", il prend bien le minimal "0" mais il semble y avoir un problème avec le maximal "5" alors que ça devrait être "18645"; ce qui fait que le résumé donne ceci :
Minimum Value = 0
Maximum Value = 5
Sum Value = NaN
Average Value = NaN
22/09/2022, 15h06
SpaceFrog

Code:

maxVal = 1* table.rows[i].cells[2].innerHTML;

sinon il te fait un classement alphabétique .. et donc "5" > "1852"

Autrement dit partout ou dans le script tu récupère une valeur numérique avec innerHTML il faut la convertir en numérique car par défaut ce sera du string ...
22/09/2022, 15h22
Toufik83

Bonjour,

Pour la valeur maximale, vous devriez utiliser parseInt() pour convertir la valeur en nombre puis ensuite la comparer :

Code:

else if (maxVal<parseInt(table.rows[i].cells[2].innerHTML))
06/10/2022, 11h51
math11

Merci pour vos réponses & suggestions,

J'ai bien le min et le max, par contre toujours pas la somme des valeurs et la moyenne.

Merci :)
06/10/2022, 17h36
Toufik83

Bonjour,

Montrez nous les modifications que vous avez apporté à votre code.

1 pièce(s) jointe(s)

Bonjour,

Alors voici la partie du code js pour le min/max/somme et moyenne

Code:

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
var table = document.getElementById("table"), sumVal = 0;
 
            getMin();
            getMax();
            getSum();
            getAvg();
 
           // get min value
            function getMin()
            {
              var minVal, minIndex;
              for(var i = 1; i < table.rows.length- 2; i++){
                  if(i === 2){
                      minVal = table.rows[i].cells[12].innerHTML;
                      minIndex = table.rows[i].rowIndex;
					  minVal = parseInt(minVal);
                  }else if(minVal > table.rows[i].cells[12].innerHTML){
                      minVal = table.rows[i].cells[12].innerHTML;
					  minVal = parseInt(minVal);
                      minIndex = table.rows[i].rowIndex;
                  }
              }
              table.rows[minIndex].cells[12].style.background = "green";
              table.rows[minIndex].cells[12].style.color = "white";
              document.getElementById("minV").innerHTML = "Minimum delivery time in day = "+minVal;
              document.getElementById("minV").style.color = "green";
              console.log("Min => "+minVal);       
            }
 
 
            // get max value
            function getMax()
            {
              var maxVal, maxIndex;
              for(var i = 1; i < table.rows.length- 2; i++){
                  if(i === 2){
                      maxVal = table.rows[i].cells[12].innerHTML;
					  maxVal = parseInt(maxVal);
                      maxIndex = table.rows[i].rowIndex;
                  }else if(maxVal < table.rows[i].cells[12].innerHTML){
                      maxVal = table.rows[i].cells[12].innerHTML;
					  maxVal = parseInt(maxVal);
                      maxIndex = table.rows[i].rowIndex;
                  }
              }
              table.rows[maxIndex].cells[12].style.background = "red";
              table.rows[maxIndex].cells[12].style.color = "white";
              document.getElementById("maxV").innerHTML = "Maximum delivery time in day = "+maxVal;
              document.getElementById("maxV").style.color = "red";
              console.log("Max => "+maxVal);   
            }
 
            // caculate total/sum value
            function getSum()
            {
              for(var i = 1; i < table.rows.length - 2; i++){
                     sumVal = sumVal + parseInt(table.rows[i].cells[12].innerHTML);
					 sumVal = parseInt(sumVal);
              }
              document.getElementById("sumV").innerHTML = "Sum Value = "+sumVal;
			  console.log(typeof sumVal);
              console.log("Sum => "+sumVal);       
            }
 
            // caculate avg value
            function getAvg()
            {
                var avg = sumVal / (table.rows.length - 2);// minus the header
                document.getElementById("avgV").innerHTML = "Average Value = "+parseInt(avg);
				console.log(typeof avg);
				var test=parseInt(avg);
				console.log (test);
                console.log("Avg => "+parseInt(avg));
            }

Et voilà la capture du résultat actuel

Pièce jointe 626821

07/10/2022, 09h28
SpaceFrog
Code:

1 2 sumVal = sumVal + parseInt(table.rows[i].cells[12].innerHTML); sumVal = parseInt(sumVal);
Il sert à quoi de doubler le parseInt ?

Code:

sumVal += parseInt(table.rows[i].cells[12].innerHTML);

Sera amplement suffisant...
07/10/2022, 15h34
NoSmoking
Bonjour,
pourquoi fait trois boucles
Code:

1 2 3 for(var i = 1; i < table.rows.length - 2; i++){ // .... }
une seule devrait suffire !

Je rappelle qu'il existe l'Unary plus qui fait bien le job et est des plus concis

Code:

valeur = +element.textContent || 0; // si NaN alors vaut 0
10/10/2022, 17h11
math11

1 pièce(s) jointe(s)

Merci NoSmoking,

Je ne connais pas du tout l'Unary plus, tu peux me donner plus d'info là dessus ?

Comment l'adapter à mon code actuel ?

Pièce jointe 626979

Au final, j'ai besoin de connaître la somme des éléments de la colonne "Number of days" en fonction du pays de la colonne "shipToAddress".

Ce qui donnerait au final :

Switzerland : 420
Austalia : 10
Singapore : 6
USA : 37'294
Spain : 6
China : 37'290
France : 1

Merci d'avance

Ton besoin est plus étendu que la demande initiale. Dans ce cas je te propose de créer une fonction qui va récupérer toutes les infos dont tu peux avoir besoin.

Au passage on peut noter qu'il peut y avoir plusieurs valeurs égales à la valeur mini, comme à la valeur maxi, et cela n'est pas pris en compte par ta fonction.

Un autre point à souligner est que les valeurs à traiter devraient ce trouver dans une partie <tbody> d'une table pour éviter des truc comme i = 1 pour « sauter » la première ligne, c'est, en général, une mauvaise pratique.

La structure de la <table> pourrait être la suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <table> <thead>  <tr> <th>...</th> </tr> </thead> <tbody>  <tr> <td>...</td> </tr> </tbody> <tfoot>  <tr> <td>...</td> </tr> </tfoot> </table>
Les choses sont bien ordonnées et plus facile à cibler.

Maintenant je te propose de voir une fonction qui va te permettre de tout récupérer et donc de retourner un objet comportant les différents valeurs, ceci n'est qu'une façon de faire pas forcément optimisée.

Appelons là getInfoTable() :
Code:

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 function getInfoTable() { // sélection des cellules à traiter const oBody = document.querySelector("table tbody"); const tabRows = [...oBody.rows]; // conversion HTMLCollection en array const NUM_CELL_VAL = 12; // position cellule valeur, à vérifier const NUM_CELL_REF = 15; // position cellule référence, à vérifier let min = Number.MAX_SAFE_INTEGER; let max = Number.MIN_SAFE_INTEGER; let sum = 0; const details = {}; // objet pour stockage cumul const tabCellsValue = []; // pour récup. réf. cellule avec valeurs // récup. des données tabRows.forEach((row) => { const cellValue = row.cells[NUM_CELL_VAL]; const value = +cellValue.textContent; // ne traite que les valeurs numériques if (!isNaN(value)) { // garde réf. pour affectation classe tabCellsValue.push(cellValue); // traitement min = Math.min(min, value); max = Math.max(max, value); sum += value; // cumul par label const label = row.cells[NUM_CELL_REF].textContent; if (!details[label]) { details[label] = 0; } details[label] += value; } }); // traitement cellules extrême, il peut y en avoir plusieurs tabCellsValue.forEach((cell) => { const value = +cell.textContent; if (value == min) cell.classList.add("cell-min"); if (value == max) cell.classList.add("cell-max"); }); // construit le résultat const result = { "max": max, "min": min, "total": sum, "écart": max - min, "moyenne": sum / (tabCellsValue.length || 1), "details": details } return result; }
Il te suffit de faire un appel du type
Code:

1 2 const data = getInfoTable(); console.log(JSON.stringify(data, null, 2));
Les cellules concernées par une valeur mini deviendront des <td class="cell-min">...</td> et celles concernées par une valeur maxi des <td class="cell-max">0</td>.
Il suffit donc de gérer cela via le CSS avec ces simples règles :
Code:

1 2 3 4 5 6 .cell-min { background-color: #DEC; } .cell-max { background-color: #ECD; }
J'ai pas mal commenté mais si tu as des soucis de compréhension n’hésite pas ;)

15/10/2022, 14h09
math11

Merci NoSmoking,

C'est parfait ;)

Je vais donc marquer ce post comme résolu