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

Version imprimable

Bonjour,

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

Citation:

Cannot read property 'getElementsByTagName' of undefined

Lors de l'utilisation de ces commandes :

Code:

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:

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.

01/08/2015, 12h26
NoSmoking

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.
01/08/2015, 12h32
odinh

Citation:

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
01/08/2015, 12h40
NoSmoking

Citation:

Je n'ai pas trouvé le forum Jquery

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

Citation:

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

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

Aller un petit indice

Code:

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

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

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.

01/08/2015, 22h06
NoSmoking
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:

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:

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:

1 2 3 4 <table>  <tr>  <td>  <input>
Citation:

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

Citation:

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

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.

Commençons par

Citation:

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.

Citation:

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:

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:

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.

Citation:

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.