[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"

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager