Récupération rang et cellule d'une table html dynamique

**odinh** · 01/08/2015, 10h49

Bonjour,

J'ai ce message d'erreur sur la ligne en italique :

Cannot read property 'getElementsByTagName' of undefined

Lors de l'utilisation de ces commandes :

Code :

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

1
2
row =document.getElementById('myTableRow').getElementsByTagName('tbody')[0].getElementsByTagName('tr')[updligne];
row.getElementsByTagName("td")[7]=updmode;

Tout ceci pour mettre à jour la cellule 7 du tableau contenant 7 lignes de la ligne donnée par la variable updligne dans laquelle il y a 5.
J'ai mis des chiffres en dur pour le même résultat.

Voila la construction de mon tableau :

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
 $('#liste').append(  '<table id="myTableRow" style="text-align: left; width: 100%;" border="1"   cellpadding="2" cellspacing="2"><body>');
               $('#liste').append("<tr><th>rang<th>codepostal<th>ville<th>nom<th>tel<th>rue<th>tag<th>pro<th>mode</th></tr>");
 
	   for (i = 0; i < len; i++){
               var rang=results.rows.item(i).rang;
               var codepostal=results.rows.item(i).codepostal;
               var tel=results.rows.item(i).tel;
               var tag=results.rows.item(i).tag;
               var pro=results.rows.item(i).pro;
               var rue=results.rows.item(i).rue;
               nomville=results.rows.item(i).ville;
               var nom=results.rows.item(i).nom;
               var mode=results.rows.item(i).mode;
               ajout_ville(nomville);
			   creerBouton(i,rang);
               $('#liste').append( '<td>' + codepostal + '</td>' );
               $('#liste').append( '<td>' + nomville + '</td>');
               $('#liste').append( '<td name=nom[]>'  + nom + '</td>');
               $('#liste').append( '<td>' + tel + '</td>');
               $('#liste').append( '<td>' + rue + '</td>');
               $('#liste').append( '<td>' + tag + '</td>');
               $('#liste').append( '<td>' + pro + '</td>');
               $('#liste').append( '<td name=updmode[]>' + mode + '</td></tr>');
          }
 
               $('#liste').append( '</body></table>');

Si vous pouviez m'aider à régler ce problème.

Je vous remercie.

Meilleures salutations.

**NoSmoking** · 01/08/2015, 12h26

Bonjour,
ou tu utilises jQuery ou non mais les deux en même temps c'est souvent aller droit dans le mur, la preuve.

En jQuery il existe la méthode jquery.find() qui devrait t'aider.

Je vois que tu n'a pas tenu compte des remarques faite précédemment ici.

**odinh** · 01/08/2015, 12h32

Envoyé par NoSmoking

Je vois que tu n'a pas tenu compte des remarques faite précédemment ici.

Bonjour,

Je n'ai pas trouvé le forum Jquery et la c'était du javascript.

Je réussis à faire des instructions en js que je n'arrive pas en Jquery, j'utilise ce que j'arrive à faire fonctionner.

Merci pour vos conseils.

Meilleures salutations

**NoSmoking** · 01/08/2015, 12h40

Je n'ai pas trouvé le forum Jquery

jQuery le forum, celui où ce trouve maintenant cette discussion.

...et la c'était du javascript.

jQuery c'est du javascript qu'on se le dise

**NoSmoking** · 01/08/2015, 14h43

Aller un petit indice

Code :

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

1
2
3
4
5
6
7
8
9
var oTDs = $( "table" ).find( "td" ); // quand même moins verbeux que le vanilla JS !
// Exemple
// récup contenu de la cellule Ligne:2 Colonne:4
var nbrCol = 5;    // par exemple
    numLig = 1;
    numCol = 3;
    numCell = ( numLig *nbrCol) +numCol;
 
alert( oTDs.eq( numCell).html());

Attention les tableaux commence à l'indice 0

**odinh** · 01/08/2015, 17h50

Merci pour vos réponses, j'ai trouvé cela qui a l'air de me satisfaire :

Code :

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

1
2
3
4
5
6
oTD = document.getElementById('liste').getElementsByTagName('td');
	for(i=0;i<oTD.length;i++){
	 // alert(oTD[i].innerHTML);
    }
	document.getElementById('liste').getElementsByTagName('td')[updligne][8]=updmode; // ne prend pas value ICI
       alert(document.getElementById('liste').getElementsByTagName('td')[updligne][8]);

Le problème est que ce tableau est construit dynamiquement donc les éléments n'existent pas le premier getElementById doit se baser sur une id présente en dur dans la page, la je me base sur une div id liste.

J'ai été élevé à la sauce Javascripr et Jscript on ne se refait pas, la conversion sera longue et douloureuse.

Dans la ligne marquée il n'accepte pas value, je na sais pas quoi mettre pour mettre à jour une input, mais je mets bien à jour l'alert affiche la modif. mais pas à l'écran.

Je vous remercie, je vais adopter la méthode Jquery puisque c'est le forum Jquery sinon il faudrait à nouveau déplacer mon sujet.

Meilleures salutations, Bonne soirée.

**NoSmoking** · 01/08/2015, 22h06

JS "vanilla" n'est pas si "verbeux" que cela si l'on utilise les possibilité offerte par l'API DOM

Dans l'exemple fourni plus haut on pourrait obtenir le même résultats en utilisant les collections rows et cells

Code :

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

1
2
3
// en js "vanilla"
var oTable = document.getElementsByTagName('TABLE')[0];
alert( oTable.rows[numLig].cells[numCol].innerHTML);

Tu pourrais même faire encore plus simple avec

Code :

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

1
2
oTDs =document.querySelectorAll('TD');
alert( oTDs[numCell].innerHTML);

Concernant ton soucis avec la value, il te faut savoir que tous les éléments ne possèdent pas une value nativement ce qui est le cas pour une <td>.

Si tu as un <input>, qui lui possède une propriété value, dans ta <td>, il te faudra "descendre" encore d'un cran dans la hiérarchie du DOM pour l'atteindre.

Code html :

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

1
2
3
4
<table>  <!-- oTable -->
    <tr>    <!-- oTable.rows[numLig] -->
        <td>    <!-- oTable.rows[numLig].cells[numCol] -->
            <input>

je vais adopter la méthode Jquery

cela n'est pas obligatoire, ce qui prime c'est de bien comprendre ce que l'on fait

**odinh** · 01/08/2015, 23h01

cela n'est pas obligatoire, ce qui prime c'est de bien comprendre ce que l'on fait

Code :

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

1
2
3
4
document.getElementById('liste').getElementsByTagName('td')[updligne][8]=updmode;
    alert(document.getElementById('liste').getElementsByTagName('td')[updligne][8]); 
 
$('#liste').append( '<td>' + mode + '</td></tr>' );

Dans ces lignes l'alert affiche bien ma modification qui ne s'affiche pas à l'écran donc je ne sais pas ou va ma modif dans une td ?

Je comprends plus facilement le javascript que le Jquery lequel contrairement à ce qui est dit plus haut peuvent être employés conjointement.

Merci encore pour votre aide qui nous évite des heures de réflexions, j'ai toujours pratiqué ainsi la programmation par l'exemple faute de formation interne.

Bonne nuit.

**NoSmoking** · 03/08/2015, 11h43

Commençons par

Je comprends plus facilement le javascript que le Jquery lequel contrairement à ce qui est dit plus haut peuvent être employés conjointement.

il ne faut pas sortir la phrase du contexte qui est dans ce cas l’accès au DOM lecture/modification.

Mélanger les genres t'empêche de profiter de la logique et des optimisations de jQuery, système de cache et autre chainage.
En javascript tu travailles sur des DOMElement, en jQuery sur des objets JQUERY.

Envoyé par NoSmoking

ce qui prime c'est de bien comprendre ce que l'on fait

visiblement tu ne t'ai pas interrogé à ce sujet et c'est pourtant le fond de ton problème.

Pour essayer de te faire comprendre voici une petite structure HTML très basique

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<table id="ma_table" border>
  <tr>
    <td>Lig 1 Col 1</td>
    <td>Lig 1 Col 2</td>
    <td>Lig 1 Col 3</td>
  </tr>
  <tr>
    <td>Lig 2 Col 1</td>
    <td>Lig 2 Col 2</td>
    <td>Lig 2 Col 3</td>
  </tr>
</table>
<div id="debug"></div>

et un morceau de code qui te montre ce que tu essaies de faire, dans le détail et sans jQuery

Code :

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

1
2
3
4
5
6
7
8
9
10
// Récupération de la TABLE
var oTable = document.getElementById('ma_table');
// Récupération des TD contenues dans la TABLE
var oTDs   = oTable.getElementsByTagName('TD');
// Récupération de la TD de la 1st ligne et 2nd colonne
var la_TD  = oTDs[1];
//Création d'une propriété identifiée 8';
la_TD[8]   = 'la Propriété 8 de la_TD vaut cette phrase';
// affichage de la valeur de cette propriété
document.getElementById('debug').innerHTML = la_TD[8] +'<br>' +la_TD.innerHTML;

tu devrais comprendre pourquoi rien ne s'affiche.

j'ai toujours pratiqué ainsi la programmation par l'exemple faute de formation interne.

Il va te falloir changer tes habitudes et observer la console d'erreurs par exemple ou travailler avec l'inspecteur d'éléments.

Récupération rang et cellule d'une table html dynamique

jQuery

Discussions similaires

Partager

Partager