[DOM] Modification du style en fonction du grand-parent ?!

**ghohm** · 02/07/2007, 14h54

Bonjour à tous,

je construis un tableau dynamiquement grâce à du J2EE, je ne connais donc pas le contenu qu'il aura !

Je souhaite pourtant changer la couleur du contenu des TDs ayant pour "class" : "txt" et ayant pour grand-parent une balise "TBODY".

J'ai fait des tests, à priori mon code est bon, mais en fait non ... ça fonctionne pas !

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
[...]
<script type="text/javascript">
	function modifStyle() {
        var i, oTD;
        var allTDs = document.getElementsByTagName("td");
        var n = allTDs.length;
 
        for (i=0 ; i<n ; i++)
        {
            oTD = allTDs[i];
 
            var tagPere = oTD.parentElement;
            var tagGdPere = tagPere.parentElement;
 
            if (oTD.className == "txt" && tagGdPere.nodeName == "TBODY")
            {
            	switch (oTD.innerHTML)
				{
					case "2":
					  oTD.style.color = "navy";
					  break;
					case "3":
					  oTD.style.color = "purple";
					  break;
					case "4":
					  oTD.style.color = "#E72100";
					  break;
					case "5":
					  oTD.style.color = "#ED7F10";
					  break;
					case "6":
					  oTD.style.color = "#FCD21C";
					  break;
					case "7":
					  oTD.style.color = "#008B00";
					  break;
					default:
					  oTD.style.color = "black";
				}
 
                oTD.style.fontWeight = "bold";
            }
        }
	}
</script>
</head>
<body onload="modifStyle()">
[...]

Résultat : Pas d'erreur JS et rien n'est modifié dans ma page !

Gôm

**ghohm** · 02/07/2007, 14h59

En fait (problème de cache ie ...), cela modifie bien tous mes éléments, mais sans prendre en compte que le grand-parent doit être une balise "TBODY" !

Concrètement, tous les <TD class="txt" ...> où est présent un chiffre, compris entre 2 et 6 inclus, sont modifiés !

**yjuliet** · 02/07/2007, 15h02

t'as pas essayé de faire ça diectement dans ta feuille de style css ??

Code :

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

1
2
 
tbody>tr>td.txt { ... }

**ghohm** · 02/07/2007, 15h05

Impossible !

Je ne vais pas faire un Switch Case en CSS ! Si ?

De plus, j'ai d'autres pages correspondant à cette class et je ne veux pas que leur contenu soit coloré !

**yjuliet** · 02/07/2007, 15h59

je te dis pas de faire un switch-case, mais simplement en définissant un chemin unique (en utilisant un id ou une classe spécifique pour le "grand parent" concerné, tu évites tout problème de scriptage, tu n'as qu'une recherche dans un arbre à l'aide d'instructions CSS ...

**SpaceFrog** · 02/07/2007, 16h03

Code :

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

parentNode.parentNode

**Auteur** · 02/07/2007, 16h04

bonjour,

Code javascript :

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

1
2
 
tagGdPere.nodeName == "TBODY"

es-tu sûr que la valeur retournée par nodeName est en majuscules ? Sinon :

Code javascript :

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

1
2
 
tagGdPere.nodeName.toUpperCase() == "TBODY"

ou essaye de voir avec le tagName :

Code javascript :

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

1
2
 
tagGdPere.tagName.toLowerCase() == "tbody"

**ghohm** · 02/07/2007, 16h10

Non, malheureusement ça ne change rien !

Si je modifie ainsi mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
		        for (i=0 ; i<n ; i++)
		        {
		            oTD = allTDs[i];
 
		            var tagPere = oTD.parentElement;
		            var tagGdPere = tagPere.parentElement;
 
		            alert("Nom de la balise "+tagGdPere.nodeName)
 
		            if (oTD.className == "txt" && tagGdPere.nodeName.toUpperCase() == "TBODY")
		            {
		            	switch (oTD.innerHTML)
						{

Le "alert" me renvoie tout le temps "TBODY" ... alors que parfois le grand-parent est directement "TABLE" ?!

**Auteur** · 02/07/2007, 16h19

Envoyé par SpaceFrog

Code :

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

parentNode.parentNode

**ghohm** · 02/07/2007, 16h24

Code :

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

var tagGdPere = oTD.parentNode.parentNode;

Ne fonctionne pas non plus !

**SpaceFrog** · 02/07/2007, 16h30

je me sers régulièrement de parentNode et cela fonctione très bien ...

essaye de faire

Code :

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

 alert(oTD.parentNode.parentNode.tagName);

ça te permettra au moins de savoir si tu cible le bon élément ...

**ghohm** · 02/07/2007, 17h05

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
			function modifStyle() {
		        var i, oTD;
		        var allTDs = document.getElementsByTagName("td");
		        var n = allTDs.length;
 
		        for (i=0 ; i<n ; i++)
		        {
		            oTD = allTDs[i];
 
		            alert(oTD.parentNode.parentNode.tagName);
 
		            var tagGdPere = oTD.parentNode.parentNode;
 
		            if (oTD.className == "txt" && tagGdPere.tagName.toUpperCase() == "TBODY")
		            {
		            	switch (oTD.innerHTML)
						{
							case "2":
							  oTD.style.color = "navy";
							  break;
							case "3":
							  oTD.style.color = "purple";
							  break;
							case "4":
							  oTD.style.color = "#E72100";
							  break;
							case "5":
							  oTD.style.color = "#ED7F10";
							  break;
							case "6":
							  oTD.style.color = "#FCD21C";
							  break;
							case "7":
							  oTD.style.color = "#008B00";
							  break;
							default:
							  oTD.style.color = "black";
						}
 
		                //oTD.style.fontWeight = "bold";
		            }
		        }
			}

Ce code "scan" bien tous les TDs de ma page ... mais me répond que tous les TDs ont pour grand-parent un "TBODY" !???

**SpaceFrog** · 02/07/2007, 19h16

Dans le DOM un table à obligatoirement un tbody, même si tu ne l'a pas explicitement écrit dans le code.
Si tu as firefox ajoute l'extension DOminspector qui te montreras la structure DOM de ta page

**Auteur** · 02/07/2007, 19h19

Envoyé par ghohm

Ce code "scan" bien tous les TDs de ma page ... mais me répond que tous les TDs ont pour grand-parent un "TBODY" !???

sous Firefox (au moins) même si la balise TBODY n'est pas dans le code HTML elle est incluse dans la liste des noeuds (cf. l'inspecteur DOM de FF

)

[edit]Spacefrog m'a grillé

[/edit]

**SpaceFrog** · 02/07/2007, 19h59

[edit]Spacefrog m'a grillé [/edit]

pour changer

**ghohm** · 03/07/2007, 09h47

Faut pas croire que j'allais me laisser faire comme ça !

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
function modifStyle() {
        var i, oTD;
        var allTDs = document.getElementsByTagName("td");
        var n = allTDs.length;
 
	       for (i=0 ; i<n ; i++)
	       {
	           oTD = allTDs[i];
 
	           var tagPere = oTD.parentNode;
 
	           if (oTD.className == "txt" && (tagPere.className.toLowerCase() == "even" || tagPere.className.toLowerCase() == "odd"))
	            {
            	switch (oTD.innerHTML)
				{
					case "2":
					  tagPere.style.color = "navy";
					  tagPere.style.fontWeight = "bold";
					  break;
					case "3":
					  tagPere.style.color = "purple";
					  tagPere.style.fontWeight = "bold";
					  break;
					case "4":
					  tagPere.style.color = "#E72100";
					  tagPere.style.fontWeight = "bold";
					  break;
					case "5":
					  tagPere.style.color = "#ED7F10";
					  tagPere.style.fontWeight = "bold";
					  break;
					case "6":
					  tagPere.style.color = "#FCD21C";
					  tagPere.style.fontWeight = "bold";
					  break;
					case "7":
					  tagPere.style.color = "#008B00";
					  tagPere.style.fontWeight = "bold";
					  break;
					default:
					  tagPere.style.color = "black";
					  tagPere.style.fontWeight = "bold";
				}
        	    }
	        }
	}
</script>

Au final : je change le style de l'élément parent du TD ayant pour class "txt" et pour élément parent, un élément ayant un class "even" ou "odd" !

Gôm 1 - DOM 0 !

Merci à vous !

**Auteur** · 03/07/2007, 10h30

Code javascript :

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

1
2
 
if (oTD.className == "txt" && tagGdPere.nodeName == "TBODY")

euh... quand on y pense, le parent d'un td est un tr et le grand parent est un tbody. Alors à quoi sert le test sur le grand parent ?

Egalité...

**ghohm** · 03/07/2007, 15h50

Envoyé par Auteur

Egalité...

Ca s'payera !

[DOM] Modification du style en fonction du grand-parent ?!

JavaScript

Discussions similaires

Partager

Partager