Fonctions de recensement dans un tableau

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai besoin de votre aide.

Voici ma page web :

Pièce jointe 520025

Je souhaite calculer le nombre de personnes, le nombre de films regardés et le nombre de séries regardés.

Pour le nombre de personnes, je vais simplement compter le nombre de lignes.

Il faut savoir que je tape dans une API pour avoir les résultats du tableau ...
Donc, pour avoir le nombre de films regardés et le nombre de séries regardés, je vais incrémenter un numéro aux IDs puisqu'ils sont tous identiques.
Puis, après, je fais un calcul tout simplement.

Voici mes fonctions :
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 methods: { NbDePersonnes() { var nbLignes = 0; var tab = document.querySelectorAll('table'); for(let i = 0, i_len = tab.length; i < i_len; i++) { let nbLignes = tab[i].querySelectorAll('tr').length; return parseInt((nbLignes - 1)); } }, NbDeFilms() { var resultat = 0 var list = document.getElementsByClassName("films"); for (var i = 0; i < list.length; i++) { list[i].setAttribute("id", "nbFilms" + i); resultat = parseInt(resultat) + parseInt(document.getElementById("nbFilms" + i).innerHTML); } return resultat; }, NbSeries() { var resultat = 0 var list = document.getElementsByClassName("series"); for (var i = 0; i < list.length; i++) { list[i].setAttribute("id", "NbSeries" + i); document.se resultat = parseInt(document.getElementById("NbSeries" + i).innerHTML); } return resultat; }, }
Sauf que ça ne marche pas ....

En effet, pour le nombre de personnes, j'ai le bon résultat sauf quand je clique sur le bouton "actualiser cette page" dans le navigateur, je n'ai plus le bon chiffre, j'ai un 0.

Pour le nombre de films regardés et le nombre de séries regardés, j'ai un 0. Cela ne fonctionne pas du tout.

Donc, j'ai besoin de votre aide afin de savoir pourquoi, s'il vous plait ?

Pour info, j'utilise vue.js, cela a peut-être un rapport ?

Si vous avez besoin d'informations supplémentaires, dites-moi.

Merci.

26/11/2019, 18h16
javatwister

salut,

Au bout de 3 lignes, il a un problème, je pense: tu traites "tous les tableaux" de ta page alors que visiblement tu ne recherches que les lignes d'une table.

Tu attribue des id à des éléments de la page qui existent déjà; ce n'est pas absurde en soi, on peut tout imaginer... mais est-ce nécessaire puisque tu cherches juste la valeur de list[i]?

Ligne 23, tu as aussi un

Code:

document.se

qui se balade;

A part ça, il manque le reste de ton code JS et le html;

Bonjour,

Merci beaucoup pour votre réponse. C'est très gentil.

Citation:

Envoyé par javatwister

Au bout de 3 lignes, il a un problème, je pense: tu traites "tous les tableaux" de ta page alors que visiblement tu ne recherches que les lignes d'une table.

Ok.
Éventuellement, je peux faire "var tab = document.getElementById('tablePersonnes');" pour recherche par ID ?
Ce qui donne comme fonction :

Code:

1
2
3
4
5
6
7
8
NbDePersonnes() {   
      var nbLignes = 0;
      var tab = document.getElementById('tablePersonnes');
      for(let i = 0, i_len = tab.length; i < i_len; i++) {
        let nbLignes = tab[i].querySelectorAll('tr').length;
        return parseInt((nbLignes - 1));
      } 
    }

Bon, le problème persiste ...

Puis, j'ai juste un tableau, ça ne doit pas poser problème ? Si ?

Citation:

Envoyé par javatwister

Tu attribue des id à des éléments de la page qui existent déjà; ce n'est pas absurde en soi, on peut tout imaginer... mais est-ce nécessaire puisque tu cherches juste la valeur de list[i]?

D'accord. Je peux le virer. Ce qui donne comme fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 NbDeFilms() {
      var resultat = 0
      var list = document.getElementsByClassName("films");
          for (var i = 0; i < list.length; i++) {
            resultat = parseInt(resultat) + parseInt(document.getElementById("nbFilms" + i).innerHTML);         
          }
           return resultat;     
    },
    NbSeries() {
      var resultat = 0
      var list = document.getElementsByClassName("series");
          for (var i = 0; i < list.length; i++) {
            resultat = parseInt(document.getElementById("NbSeries" + i).innerHTML);         
          }
           return resultat;     
    }

Comme en haut, le problème persiste :/

Citation:

Envoyé par javatwister

Ligne 23, tu as aussi un

Code:

document.se

qui se balade;

Ah exact. Je le supprime, merci.

Voici mon code :

- Home.vue qui est dans le dossier "views"

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
75
76
77
<template>
  <div>
    <title-bar :title-stack="titleStack" class="title_header" />
    <section class="section is-main-section">
      <tiles>
        <card-widget class="tile is-child" type="is-primary" :number=" NbDePersonnes()" label="Nombre de personnes"/>
        <card-widget class="tile is-child" type="is-primary" :number="NbDeFilms()" label="Nombre de films regardés"/>
        <card-widget class="tile is-child" type="is-primary" :number="NbSeries()" label="Nombre de séries regardés"/> 
      </tiles>
      <card-component title="Virtual Machines Summary" class="has-table has-mobile-sort-spaced">
      <clients-table-sample data-url="https://dev-hto-api.fr/api/v1/getpersonnes"/>
      </card-component>
    </section> 
  </div> 
</template>
 
<script>
import * as chartConfig from '@/components/Charts/chart.config'
import TitleBar from '@/components/TitleBar'
import Tiles from '@/components/Tiles'
import CardWidget from '@/components/CardWidget'
import CardComponent from '@/components/CardComponent'
import MyHomeTablePersonnes from '@/components/MyHomeTablePersonnes'
export default {
  name: 'home',
  components: {
    MyHomeTablePersonnes,
    CardComponent,
    CardWidget,
    Tiles,
    TitleBar
  },
  data () {
    return {
      defaultChart: {
        chartData: null,
        extraOptions: chartConfig.chartOptionsMain
      }
    }
  },
  computed: {
    titleStack () {
      return [
        'Accueil'
      ]
    } 
  },
  methods: {
      NbDePersonnes() {   
      var nbLignes = 0;
      var tab = document.querySelectorAll('table');
      for(let i = 0, i_len = tab.length; i < i_len; i++) {
        let nbLignes = tab[i].querySelectorAll('tr').length;
        return parseInt((nbLignes - 1));
      } 
    },
    NbDeFilms() {
      var resultat = 0
      var list = document.getElementsByClassName("films");
          for (var i = 0; i < list.length; i++) {
            list[i].setAttribute("id", "nbFilms" + i);
            resultat = parseInt(resultat) + parseInt(document.getElementById("nbFilms" + i).innerHTML);         
          }
           return resultat;     
    },
    NbSeries() {
      var resultat = 0
      var list = document.getElementsByClassName("series");
          for (var i = 0; i < list.length; i++) {
            list[i].setAttribute("id", "NbSeries" + i); 
            resultat = parseInt(document.getElementById("NbSeries" + i).innerHTML);         
          }
           return resultat;     
    },
  }
}
</script>

- Le template de ma page "MyHomeTablePersonnes" qui est dans le dossier "component".

vue.js

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
<template>
  <div>
    <modal-box :is-active="isModalActive" :trash-object-name="trashObjectName" @confirm="trashConfirm"
               @cancel="trashCancel"/>
    <b-table
      :checked-rows.sync="checkedRows"
      :checkable="checkable"
      :loading="isLoading"
      :paginated="paginated"
      :per-page="perPage"
      :striped="false"
      :hoverable="true"
      :data="clients">
 
      <template slot-scope="ligne"> 
 
        <b-table-column label="Nom >
          {{ ligne.row.NOM }}
        </b-table-column>
        <b-table-column label="Prénom" >
          {{ ligne.row.PRENOM }}
        </b-table-column>
        <b-table-column label="Nombre de films regardés" >
          <div class="films" id="nbFilms" >{{ ligne.row.NBFILMS }}</div>
        </b-table-column>
        <b-table-column label="Nombre de séries regardés" >
          <div class="series" id="NbSeries" > {{ ligne.row.NBSERIES }}</div> 
        </b-table-column>
 
      </template>
 
      <section class="section" slot="empty">  
        <div class="content has-text-grey has-text-centered">
          <template v-if="isLoading">
            <p>
              <b-icon size="is-large"/>
            </p>
          </template>
          <template v-else>
            <p>
              <b-icon icon="emoticon-sad" size="is-large"/>
            </p>
            <p>Copyright</p>
          </template>
        </div>
      </section>
    </b-table>
  </div>
</template>

Mon problème est peut-être que mon tableau est dans "MyHomeTablePersonnes.vue" et mes fonctions dans "Home.vue" ? Il n'arrive pas à récupérer les ID, peut-être ? Bref, je ne sais pas. Je suis paumé :/

Merci.

26/11/2019, 22h23
javatwister

Tout cela n'est pas cohérent du tout; tu veux seulement additionner des valeurs de td alors essaie de te renseigner en ligne sur ce genre de choses:
- comment compter les lignes d'une table HTML?
- comment additionner les valeurs d'éléments HTML;
- que signifie getElementById()?;

après, on peut t'aider si tu patauges encore;
27/11/2019, 09h46
Invité
Bonjour,

il n'y a pas besoin de 3 fonctions, mais d'une seule, qui parcourt chaque ligne de la <table>.

MONTRE le code HTML de la <table> * :
- -> touche "F12" du clavier
- -> "Inspecteur"
- -> sélectionner et copier-coller la portion de code HTML.
* pour parcourir correctement la <table>, on a notamment besoin de savoir si les balises <thead> / <tbody> existent ou pas.

Si on part de cette structure HTML :

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
<table id="ma_table">
  <thead>
  <tr>
    <th colspan="4">Liste des personnes</th>
  </tr>
  <tr>
    <th>Nom</th>
    <th>Prénom</th>
    <th>Films</th>
    <th>Séries</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Jean</td>
    <td>Bon</td>
    <td>11</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Anna-Lise</td>
    <td>Durine</td>
    <td>5</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Pierre</td>
    <td>Afeu</td>
    <td>14</td>
    <td>8</td>
  </tr>
  </tbody>
</table>

Alors :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var tab = document.getElementById('ma_table').querySelector('tbody');
var tab_rows = tab.getElementsByTagName('tr');
var nbre_rows = tab_rows.length;
 
var nbre_personnes = nbre_rows;
var nbre_films = 0;
var nbre_series = 0;
 
for( var i=0; i<nbre_rows; i++ )
{
  var row_cells = tab_rows[i].getElementsByTagName('td');
  nbre_films += Number(row_cells[2].textContent);
  nbre_series += Number(row_cells[3].textContent);
}
 
console.log( nbre_personnes );
console.log( nbre_films );
console.log( nbre_series );

Bonjour,

Citation:

Envoyé par jreaux62

* pour parcourir correctement la <table>, on a notamment besoin de savoir si les balises <thead> / <tbody> existent ou pas.

après parsage du code HTML les balises <thead> et <tbody> existeront toujours même si omises dans le code initial.

Concernant le parcours des éléments dans une <table>, il ne faut pas hésiter à utiliser les HTMLCollection disponibles.

Code:

1
2
3
4
5
6
HTMLTableElement
 ├ HTMLTableElement.rows
 │   └ HTMLTableElement.rows.cells
 └ HTMLTableElement.tBodies
    └ HTMLTableElement.tBodies.rows
       └ HTMLTableElement.tBodies.rows.cells

Au final le code peut tout à fait devenir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//var tab = document.getElementById('ma_table').querySelector('tbody');
var tab = document.getElementById('ma_table').tBodies[0];
//var tab_rows = tab.getElementsByTagName('tr');
var tab_rows = tab.rows;
var nbre_rows = tab_rows.length;
var nbre_personnes = nbre_rows;
var nbre_films = 0;
var nbre_series = 0;
for (var i = 0; i < nbre_rows; i++) {
  //  var row_cells = tab_rows[i].getElementsByTagName('td');
  //  nbre_films += Number(row_cells[2].textContent);
  nbre_films  += Number(tab_rows[i].cells[2].textContent);
  //  nbre_series += Number(row_cells[3].textContent);
  nbre_series += Number(tab_rows[i].cells[3].textContent);
}
console.log(nbre_personnes);
console.log(nbre_films);
console.log(nbre_series);

... et sans les mises en commentaires

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var tab = document.getElementById('ma_table').tBodies[0];
var tab_rows = tab.rows;
var nbre_rows = tab_rows.length;
var nbre_personnes = nbre_rows;
var nbre_films = 0;
var nbre_series = 0;
for (var i = 0; i < nbre_rows; i++) {
  nbre_films  += Number(tab_rows[i].cells[2].textContent);
  nbre_series += Number(tab_rows[i].cells[3].textContent);
}
console.log(nbre_personnes);
console.log(nbre_films);
console.log(nbre_series);

si l'on n'a pas IE dans le viseur on peut également utiliser un forEach, de bon aloi, pour la boucle.

28/11/2019, 16h11
Invité
+1 NoSmoking.

Et pour ceux que ça intéresse (dont moi) :
- Interface de l'élément HTML Table
- Interface HTMLTableElement
28/11/2019, 17h03
NoSmoking
Citation:

Envoyé par NoSmoking

après parsage du code HTML les balises ~~<thead> et~~ <tbody> existeront toujours même si omises dans le code initial.

J'ai été un peu rapide pour le <thead>, il n'est pas automatique et il est bon de préciser qu'une <table> vide
Code:

1 2 <table> </table>
restera vide alors que
Code:

1 2 3 <table> <tr></tr> </table>
donnera
Code:

1 2 3 4 5 <table> <tbody> <tr></tr> </tbody> </table>