Changer la mise en forme d'un tableau et de son contenu ?

**ghohm** · 05/07/2007, 16h37

Bonjour à tous,

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
		<script type="text/javascript">
			function modifStyle() {
		        var i;
		        var allTRs = document.getElementsByTagName("tr");
		        var n = allTRs.length;
		 		
		        for (i=0 ; i<n ; i++)
		        {
		        	if ((allTRs[i].className.toLowerCase() == "even") || (allTRs[i].className.toLowerCase() == "odd"))
		        	{
		            	if (allTRs[i].childNodes[1].innerHTML != allTRs[i].childNodes[2].innerHTML)
		            	{
		            		/*allTRs[i].style.border = "1px solid #E72100";*/
		            		allTRs[i].style.borderColor = "#E72100";
		            		allTRs[i].childNodes[2].style.color = "#E72100";
		            	}
		            }
		        }
			}
		</script>

Impossible de modifier la couleur de la bordure de la ligne (balise : <TR>) !

Merci de m'aider ?

**lapanne** · 05/07/2007, 16h42

t'aurais pas oublier le style entre allTRs[i].border-color ?

**ghohm** · 05/07/2007, 16h44

Envoyé par lapanne

t'aurais pas oublier le style entre allTRs[i].border-color

Effectivement, j'avais même mal saisi la propriété "color" d'un "border" !

C'est corrigé dans le CODE du 1er post !

**ghohm** · 05/07/2007, 17h06

Pourquoi ce code ne fonctionne-t-il pas sous FF ?

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
		<script type="text/javascript">
			function modifStyle() {
		        var i;
		        var allTRs = document.getElementsByTagName("tr");
		        var n = allTRs.length;
 
		        for (i=0 ; i<n ; i++)
		        {
		        	if ((allTRs[i].className.toLowerCase() == "even") || (allTRs[i].className.toLowerCase() == "odd"))
		        	{
		            	if (allTRs[i].childNodes[1].innerHTML != allTRs[i].childNodes[2].innerHTML)
		            	{
		            		allTRs[i].childNodes[0].style.backgroundColor = "#E72100";
		            		allTRs[i].childNodes[1].style.backgroundColor = "#E72100";
		            		allTRs[i].childNodes[2].style.backgroundColor = "#E72100";
 
		            		allTRs[i].childNodes[2].style.color = "white";
		            		allTRs[i].childNodes[2].style.fontWeight = "bold";
		            	}
		            }
		        }
			}
		</script>

Ne serait ce pas une interprétation du DOM qui différerait entre IE 6 et FF ?

**ghohm** · 06/07/2007, 12h09

Voici mon code final :

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
49
50
51
52
53
54
55
56
57
<html>
	<head>
		[...]
		<script type="text/javascript">
			function modifStyle() {
		        var i, j;
		        var allTRs = document.getElementsByTagName("tr");
		        var n = allTRs.length;
		        var msg = document.getElementById("msg");
 
		 		j = 0;
 
		        for (i=0 ; i<n ; i++)
		        {
		        	if ((allTRs[i].className.toLowerCase() == "even") || (allTRs[i].className.toLowerCase() == "odd"))
		        	{
		            	allTRs[i].childNodes[1].align = "center";
		            	allTRs[i].childNodes[2].align = "center";
 
		            	if (allTRs[i].childNodes[1].innerHTML != allTRs[i].childNodes[2].innerHTML)
		            	{
		            		allTRs[i].childNodes[0].style.backgroundColor = "#E72100";
		            		allTRs[i].childNodes[0].style.fontWeight = "bold";
		            		/*allTRs[i].childNodes[0].style.fontStyle = "italic";*/
 
		            		allTRs[i].childNodes[1].style.backgroundColor = "#E72100";
		            		allTRs[i].childNodes[1].style.fontWeight = "bold";
		            		allTRs[i].childNodes[1].style.paddingRight = "5px";
		            		allTRs[i].childNodes[1].align = "right";
 
		            		allTRs[i].childNodes[2].style.backgroundColor = "#E72100";
		            		allTRs[i].childNodes[2].style.fontWeight = "bold";
		            		allTRs[i].childNodes[2].style.color = "white";
		            		allTRs[i].childNodes[2].style.paddingLeft = "5px";
		            		allTRs[i].childNodes[2].align = "left";
 
		            		j++;
 
		            		msg.innerHTML = "Il existe <font color='#E72100'>"+ j +" différence(s)</font> entre ces 2 fichiers.";
		            	}
		            	else
		            	{
		            		msg.innerHTML = "Ces 2 fichiers sont rigoureusement <font color='#008B00'><u>identiques</u></font>.";
		            	}
 
		            msg.className = "info";
		            }
		        }
			}
		</script>
	</head>
	<body onload="modifStyle()">
		[...]
		<span id="msg">&nbsp;</span>
		[...]
	</body>
</html>

Par contre, ce code ne fonctionne pas du tout sous FF !

Si ça vient bien de l'interprétation du DOM, comme je le pense, où est cette fameuse différence ?!!!

**ghohm** · 06/07/2007, 12h19

Voici (je pense) pourquoi ça plante sous FF !

J'essaye de trouver comment "créer un nettoyeur de noeuds qui supprime les noeuds textes vides (ne contenant que des caractères blancs)" !

Si quelqu'un peut me le donner avant que je ne me casse la tête à le faire ... je suis pas contre !

Changer la mise en forme d'un tableau et de son contenu ?

JavaScript

Discussions similaires

Partager

Partager