[DOM] Récupérer l'id d'un noeud parent - DOM

Version imprimable

13/02/2008, 11h24
identifiant_bidon

[DOM] Récupérer l'id d'un noeud parent - DOM

Bonjour , voici mon problème :

j'ai l'arborescence suivante :

tr - id = 'id_du_tr'
\
td
\
table - id= 'mois_courant'

var Mois_courant = document.getElementById('mois_courant').id;

Voila je voudrais pouvoir récupérer l'id du tr a partir de l'element table dont l'id est mois_courant en utilisant ParentNode et compagnie.
J'espère avoir été assez clair

Merci
13/02/2008, 11h33
SpaceFrog

dans la balise table:

Code:

onclick="alert(this.parentNode.parentNode.id)"

le premier parentNode étant le td contenant le table
le second étant le tr contenant le td ...
13/02/2008, 11h35
E.Bzz

Bonjour,

Citation:

Envoyé par identifiant_bidon

J'espère avoir été assez clair

moyen, mais si c'est une table incluse dans un td :

Code:

alert(document.getElementById('mois_courant').parentNode.parentNode.id);

1° parentNode => td
2° parentNode => tr

A+

Spaffy E.bzz, je suis daccord avec vous pour le parentNode.parentNode, mais dans le cas ou son élément se trouverait dans d'autres balises ? p , div et autres ?

j'aurais plutôt utilisé une fonction récursive :

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
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function trouveLigneParente(MonElement){
	var Parent = MonElement.parentNode ;
	if(Parent.tagName != "TR"){
		temp = trouveLigneParente(Parent);
	}
	else{
		temp = Parent;
	}
	return temp;
}
</script>
</head>
 
<body><table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="toto">
    <td>&nbsp;</td>
    <td><div><input type="button" value="Trouve ma ligne" onclick="alert(trouveLigneParente(this).id)" /></div></td>
  </tr>
</table>
 
</body>
</html>

13/02/2008, 12h02
SpaceFrog

Exact Le_Chom, mais ce n'est pas le structure qu'il nous à indiqué ...

j'apporterais une petit précaution à prendre au niveau de ton script
en focntion de navigateurs je ne suis jamais sur de la casse de la balise, je préfère donc

Code:

if(Parent.tagName.toLowerCase() != "tr")
13/02/2008, 13h43
le_chomeur

Merci de ces précisions pour le toLowerCase() ;) j'ai justement eu l'erreur en codant le script :p .
Pour la fonction je l'ai donnée , à titre d'information pour que sa structure soit plus générique ;)

Dans la continuité de ma première question :
Code:

1 2 3 4 5 6 7 8 9 10 11 var row = document.createElement("tr"); for (var i = 1; i <= 28; i++) { cell = document.createElement("td"); texte = document.createTextNode("M"); cell.appendChild(texte); row.appendChild(cell); } document.getElementById('mois_courantFevrier').appendChild(row); document.getElementById('mois_courantFevrier').setAttribute("border", "1");
Ce code fonctionne a merveille sous firefox mais pas du tout sous IE7. mois_courantFevrier est l'id d'un tbody.
Est-ce que qq'un a une idée de ce qui ne va pas avec IE ???
Merci

13/02/2008, 14h54
le_chomeur
étrange : je viens de tester :
Code:

1 2 3 4 5 6 7 <input type="button" value="test" onclick="test()" /> <table width="100%" border="1" > <tbody id="mois_courantFevrier"> </tbody> </table>
avec ton code et cela marche parfaitement sous ie7/firefox par contre si j'assigne l'id sur le tableau directement effectivement ça n'affiche rien sous ie7 MAIS ! en faisant un alert(document.getElementById('mois_courantFevrier').innerHTML) juste après le

Code:

document.getElementById('mois_courantFevrier').appendChild(row);

j'ai bien mon code généré dans la source
13/02/2008, 15h05
identifiant_bidon

Autant pour moi, il s'agissait d'une erreur de ma part.

Au moins, on aura appris que si on met pas de TBODY avec un id dessus, ça marche pas avec IE :lol:
13/02/2008, 15h09
SpaceFrog

il faut juste toujours appender dans le tbody ...
13/02/2008, 15h41
identifiant_bidon

Autrement question subsidiaire : me sera-t-il possible avec le code donné ci dessus de gérer des evenements tels que onclick, onmouseover, ... sur les cellules que j'ai créé (pour en changer la couleur par exemple) ??? Et cela fonctionnera-t-il avec les 2 principaux navigateurs ??
13/02/2008, 15h54
le_chomeur

oui tu as juste a ajouter les évènement au moment de la création de tes cellules/lignes :) et oui ce sera compatible ie/firefox
13/02/2008, 16h19
identifiant_bidon

Ok merci pour les renseignements.