Discussion :

[math11]

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 php :

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
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

[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

[math11]

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


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

[SpaceFrog]

Code :

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

   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 ...

[Toufik83]

Bonjour,

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

Code :

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

else if (maxVal<parseInt(table.rows[i].cells[2].innerHTML))

[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

[Toufik83]

Bonjour,

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

[math11]

Bonjour,

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

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
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

[SpaceFrog]

Code :

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

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

Il sert à quoi de doubler le parseInt ?

Code :

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

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

Sera amplement suffisant...

[NoSmoking]

Bonjour,
pourquoi fait trois boucles

Code :

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

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 :

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

valeur = +element.textContent || 0; // si NaN alors vaut 0

[math11]

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 ?



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

[NoSmoking]

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 html :

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
<table>
  <thead>      <!-- ici les entêtes -->
    <tr>
      <th>...</th>
    </tr>
  </thead>
  <tbody>      <!-- ici les données -->
    <tr>
      <td>...</td>
    </tr>
  </tbody>
  <tfoot>      <!-- ici les empieds -->
    <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 :

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
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 :

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

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 css :

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

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

[math11]

Merci NoSmoking,

C'est parfait

Je vais donc marquer ce post comme résolu