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

**identifiant_bidon** · 13/02/2008, 11h24

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

**SpaceFrog** · 13/02/2008, 11h33

dans la balise table:

Code :

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

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

le premier parentNode étant le td contenant le table
le second étant le tr contenant le td ...

**E.Bzz** · 13/02/2008, 11h35

Bonjour,

Envoyé par identifiant_bidon

J'espère avoir été assez clair

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

Code :

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

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

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

A+

**le_chomeur** · 13/02/2008, 11h59

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 :

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
 
<!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>

**SpaceFrog** · 13/02/2008, 12h02

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 :

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

if(Parent.tagName.toLowerCase() != "tr")

**le_chomeur** · 13/02/2008, 13h43

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

**identifiant_bidon** · 13/02/2008, 14h40

Dans la continuité de ma première question :

Code :

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

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

**le_chomeur** · 13/02/2008, 14h54

étrange : je viens de tester :

Code :

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

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 :

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

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

j'ai bien mon code généré dans la source

**identifiant_bidon** · 13/02/2008, 15h05

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

**SpaceFrog** · 13/02/2008, 15h09

il faut juste toujours appender dans le tbody ...

**identifiant_bidon** · 13/02/2008, 15h41

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 ??