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

Version imprimable

Bonjour à tous,

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

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

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

02/07/2007, 14h59
ghohm

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 ! 8O
02/07/2007, 15h02
yjuliet
t'as pas essayé de faire ça diectement dans ta feuille de style css ??
Code:

1 2 tbody>tr>td.txt { ... }
02/07/2007, 15h05
ghohm

Impossible !

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

De plus, j'ai d'autres pages correspondant à cette class et je ne veux pas que leur contenu soit coloré ! ;)
02/07/2007, 15h59
yjuliet

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 ...
02/07/2007, 16h03
SpaceFrog

Code:

parentNode.parentNode
02/07/2007, 16h04
Auteur
bonjour,
Code:

1 2 tagGdPere.nodeName == "TBODY"
es-tu sûr que la valeur retournée par nodeName est en majuscules ? Sinon :
Code:

1 2 tagGdPere.nodeName.toUpperCase() == "TBODY"
ou essaye de voir avec le tagName :
Code:

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

Non, malheureusement ça ne change rien ! :?

Si je modifie ainsi mon code :

Code:

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" ?! 8O

02/07/2007, 16h19
Auteur

Citation:

Envoyé par SpaceFrog

Code:

parentNode.parentNode

:question:
02/07/2007, 16h24
ghohm

Code:

var tagGdPere = oTD.parentNode.parentNode;

Ne fonctionne pas non plus ! :?
02/07/2007, 16h30
SpaceFrog

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

essaye de faire

Code:

alert(oTD.parentNode.parentNode.tagName);

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

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

02/07/2007, 19h16
SpaceFrog

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
02/07/2007, 19h19
Auteur

Citation:

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é :aie: [/edit]
02/07/2007, 19h59
SpaceFrog

Citation:

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

pour changer :aie: :aie:

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

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
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" ! :aie:

Gôm 1 - DOM 0 ! :mrgreen:

Merci à vous ! ;)

03/07/2007, 10h30
Auteur
Code:

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

Egalité...:mouarf:
03/07/2007, 15h50
ghohm

Citation:

Envoyé par Auteur

Egalité...:mouarf:

:ouin:

Ca s'payera ! :mouarf: