Discussion :

[CocoFlouq]

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]

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]

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]

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]

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

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.