Discussion :

[Vengryn]

Bonjour,

J'ai besoin de votre aide.

Voici ma page web :



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

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

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

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

document.se

qui se balade;

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

[Vengryn]

Bonjour,

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

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 :

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

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 ?

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 :

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

Ligne 23, tu as aussi un

Code :

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

document.se

qui se balade;

Ah exact. Je le supprime, merci.

Voici mon code :

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

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

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

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

[Invité]

Si on part de cette structure HTML :

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

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

[NoSmoking]

Bonjour,

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

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

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 :

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

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

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.

[Invité]

+1 NoSmoking.

Et pour ceux que ça intéresse (dont moi) :

• Interface de l'élément HTML Table
• Interface HTMLTableElement

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

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

1
2
<table>
</table>

restera vide alors que

Code html :

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

1
2
3
<table>
  <tr></tr>
</table>

donnera

Code html :

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

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