Afficher nombre de lignes de mon tableau basé sur un json

**CocoFlouq** · 26/03/2015, 17h05

Bonjour à tous,

Après de nombreuses recherches et quelques pistes trouvées sur d'autres discussions, je ne parviens toujours pas à afficher le nombre de lignes de mon tableau créé à partir d'un json.
Je m'explique :
- Dans l'idéal, j'aimerais que chaque ligne de mon tableau soit précédée par un numéro de ligne
- Dans l'absolu, un simple affichage du nombre de lignes contenues dans mon tableau affiché juste avant celui-ci serait suffisant

Mon tableau est créé grâce au script suivant :

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
function get_values(){ //Fonction permettant la création du tableau de resultats
 
  var json = "http://*******/get_json.php?callback=?";
  if(document.getElementById('Filtre_ti').value!=""){
    json = json + "&nom_TI=" + document.getElementById('Filtre_ti').value;
  }
 
  console.log(json);
 
  var titre_colindex = 0;
  $.getJSON(json ,function(data){
    console.log(data);
   if(data.length != 0){
    newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
    $.each(data[0], function(index, valeur){ //Pour chaque colonne
      newCell = newRow.insertCell(titre_colindex);
      newCell.innerHTML = index;
      titre_colindex+=1;
    });
 
    $.each(data, function(i,ti){
       var newRow;
       var newCell;
 
            newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
            newCell = newRow.insertCell(0);
            newCell.innerHTML = ti.TI;
 
        var i_colindex=1;
            $.each(ti, function(index, valeur){
 
              if(index != "TI"){
                newCell = newRow.insertCell(i_colindex);
                newCell.innerHTML = valeur;
                i_colindex+=1;
              }
            });
 
          });  //End each
        console.log("End fct");
  }

Voici mon formulaire en 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
<form name="monform" onSubmit="delete_tableau();get_values();return false" class="tableau" method="get"> <!--Creation du formulaire par l'entree utilisateur-->
    </br></br>Quel TI recherchez vous ?</br></br>
    <table border=0>
        <tr>
            <td>Nom du TI</td>
            <td><input type="text" name="nom_TI" id="Filtre_ti"></td>
        </tr>
        <tr>
            <td COLSPAN=1><button type="button" onclick="delete_tableau();get_values();">GO</button></td>
        </tr>
    </table>
    </br>
    <table id="mon_tableau" border=1><tbody></tbody></table>
</form>

Après divers essais avec diverses méthodes, je tombe souvent sur un "unable to getElementsByTagName of undefined", j'ai tenté de changer le script de position mais rien n'y fait.

Avez vous des pistes ?

Merci de votre aide,
Corentin.

**SylvainPV** · 26/03/2015, 17h40

L'erreur signalée signifie que le tableau d'id mon_tableau n'a pas pu être récupéré. Est-ce que tu lances bien ce script après que le DOM soit chargé ? En le mettant juste avant la fermeture </body> par exemple ?

**CocoFlouq** · 26/03/2015, 17h55

Bonsoir Sylvain,

Oui je mets pourtant bien ma fonction juste avant la balise </body>...
Toujours cette erreur : Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined

Ma fonction de test, tirée d'une discussion sur ce site, est la suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
function get_nb(){
      var table = document.getElementsByTagName('mon_tableau')[0],
      rows = table.getElementsByTagName('tr'),
      text = 'textContent' in document ? 'textContent' : 'innerText';
 
         for (var i = 0, len = rows.length; i < len; i++){
             rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
         }
}
</script>

J'avoue ne pas bien comprendre la partie en rapport avec "text", mais l'erreur indiquée ne semble pas provenir de là ?...

Merci pour ton aide,
Corentin.

**headmax** · 26/03/2015, 18h28

Salut,
Essaye de gérer toi même cette erreur en faisant un

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
function jai_une_erreur(){
        console.log("ton object est mort sur la page porque?");
}
function get_nb(){
     if(document.getElementsByTagName('mon_tableau')[0] !== undefined){
             var table = document.getElementsByTagName('mon_tableau')[0],
             rows = table.getElementsByTagName('tr'),
             text = 'textContent' in document ? 'textContent' : 'innerText';
 
             for (var i = 0, len = rows.length; i < len; i++){
                 rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
            }
    }else{
         console.log("ton object mon_tableau est mort, mais erreur géré");
   }
}

**SylvainPV** · 26/03/2015, 20h25

Ça va pas aider à trouver l'erreur si on en rajoute d'autres...

Code :

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

document.getElementsByTagName('mon_tableau')

Peux-tu nous donner le code complet de la page? Ton message d'erreur est clair, l'élément ne peut pas être récupéré donc il y a un forcément un problème lié au DOM et non au reste de ton code JavaScript

**CocoFlouq** · 27/03/2015, 09h34

J'ai tenté ta fonction headmax mais en effet j'arrive toujours dans le else étant donné que le getElementsByTagName me revient undefined.
Ca provient surement du fait que mon tableau est affiché au clic, la fonction get_nb() n'est peut être pas exécutée à temps.
Pourtant ma fonction delete() est aussi exécutée au clic et celle-ci marche parfaitement...

La totalité de ma page :

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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
        <link rel="stylesheet" href="http://****/style.css"/>
        <title>****</title>
        <link href='http://fonts.googleapis.com/css?family=Audiowide|Artifika' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
 
function delete_tableau(){ //Fonction permettant l'effacement du tableau anciennement affiche lors d'une nouvelle recherche
  var table = document.getElementById("mon_tableau");
    while(table.rows.length > 0) {
    table.deleteRow(0);
    }
  }
 
function get_values(){ //Fonction permettant la crÃ©ion du tableau de resultats
 
  var json = "http://****/get_json.php?callback=?";
  if(document.getElementById('Filtre_ti').value!=""){
    json = json + "&nom_TI=" + document.getElementById('Filtre_ti').value;
  }
 
  console.log(json);
 
  var titre_colindex = 0;
  $.getJSON(json ,function(data){
    console.log(data);
   if(data.length != 0){
    newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
    $.each(data[0], function(index, valeur){ //Pour chaque colonne
      newCell = newRow.insertCell(titre_colindex);
      newCell.innerHTML = index;
      titre_colindex+=1;
    });
 
    $.each(data, function(i,ti){
       var newRow;
       var newCell;
 
            newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
            newCell = newRow.insertCell(0);
            newCell.innerHTML = ti.TI;
 
        var i_colindex=1;
            $.each(ti, function(index, valeur){
 
              if(index != "TI"){
                newCell = newRow.insertCell(i_colindex);
                newCell.innerHTML = valeur;
                i_colindex+=1;
              }
            });
 
          });  //End each
        console.log("End fct");
  }
 else{
  document.write('<div>Aucun resultat.</div>');
  }
 });  //End getJSON
} //End getvalues
 
                </script>
    </head>
      <body>
 
        <div class="contenu">
 
          <form name="monform" onSubmit="delete_tableau();get_values();get_nb();return false" class="tableau" method="get"> <!--Creation du formulaire pour l'entree utilisateur-->
                </br></br>Quel TI recherchez vous ?</br></br>
                  <table border=0>
                  <tr>
                        <td>Nom du TI</td>
                        <td>
                        <input type="text" name="nom_TI" id="Filtre_ti">
                        </td>
                  </tr>
 
                  <tr>
                        <td COLSPAN=1>
                        <button type="button" onclick="delete_tableau();get_values();get-nb();">GO</button>
                        </td>
                  </tr>
                  </table>
                  </br>
                  <table id="mon_tableau" border=1><tbody></tbody></table>
          </form>
      </div>
<script type="text/javascript">
function get_nb(){
                    var table = document.getElementsByTagName('mon_tableau')[0],
                    rows = table.getElementsByTagName('tr'),
                    text = 'textContent' in document ? 'textContent' : 'innerText';
 
                    for (var i = 0, len = rows.length; i < len; i++){
                      rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
                  }
 }
      </script>
 
    </body>
</html>

Je continue de chercher, merci de votre aide.

**SylvainPV** · 27/03/2015, 09h51

Tu n'as pas corrigé l'erreur que je t'ai signalé :

Code :

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

document.getElementsByTagName('mon_tableau')

Depuis quand mon_tableau est un nom de balise ?

**CocoFlouq** · 27/03/2015, 10h25

En effet je mélange tout...
J'ai donc mis la balise <tbody> dedans :

Code :

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

var table = document.getElementsByTagName('tbody')[0];

Je n'ai donc plus l'erreur mais les numéros de ligne ne sont pas affichés.

Pourtant dans la console de chrome, je vois bien tbody avec la forme suivante :
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
...
</tbody>

**SpaceFrog** · 27/03/2015, 11h51

Code :

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

console.log($('tbody tr').length)

**CocoFlouq** · 27/03/2015, 15h51

J'ai trouvé une "solution" en faisant un simple :

Code :

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

alert(data.length);

J'ai affiché ce que retourne :

Code :

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

rows = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

et je tente un :

Code :

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

rows = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].getElementsByTagName('tr').childElementCount;

mais celui-ci me revient comme undefined.
C'est pourtant une propriété qui existe quand je regarde dans la console...
Donc toujours impossible d'afficher le numéro devant la ligne :/

**SylvainPV** · 27/03/2015, 16h52

getElementsByTagName renvoie une liste d'éléments. childElementCount est une propriété d'un seul élément, pas d'une liste d'éléments.

Le code semble tiré par les cheveux pour juste afficher un numéro devant une ligne. Pourquoi ne pas le faire dans la fonction qui ajoute la ligne directement ?

Code :

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

1
2
3
 newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
newCell = newRow.insertCell(0);
newCell.innerHTML = "N°"+ i + " " + ti.TI;

**CocoFlouq** · 27/03/2015, 17h21

En effet merci beaucoup Sylvain, j'ai à la fois le numéro devant la ligne et le nombre de résultats désormais.

Afficher nombre de lignes de mon tableau basé sur un json

JavaScript

Discussions similaires

Partager

Partager