[DOM] supprimer ligne de couleur identique + tableau

**ben7875** · 31/03/2009, 16h45

Bonjour à tous,

Voila un petit post qui vient exposer mon incompétence en javascript.
Je suis entrain de mettre en place un comparateur de fichier de configuration, qui après analyse, renvoi les comparaisons dans un grand tableau html avec des jeu de couleurs pour voir les parametres identique/différents ou abs.

Le tableau pouvant s'étendre sur plus de 50 colonnes et 300 lignes, il est bon de supprimer toutes les lignes qui sont vertes(toutes les lignes ou les clés sont identiques) pour ne laisser afficher que les lignes ou il y a au moins un parametre différent(orange) ou absent(rouge).

Et donc pour faire cela, je n'ai pas trouver plus sucidaire que le javascript !

voici un exemple type du tableau html.

Code html :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<table border=1 bgcolor=#D3D3D3 bordercolor="#000000">
<tr>
<td><b>Section</b></td>
<td><b>Clé</b></td>
<td><b>config1.ini</b></td>
<td><b>config2.ini</b></td>
<td><b>config3.ini</b></td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
</table>

Le but étant donc de réafficher le tableau avec les lignes vertes en moins et sans recharger la page.

!

**RomainVALERI** · 31/03/2009, 17h07

Envoyé par ben7875

Et donc pour faire cela, je n'ai pas trouver plus sucidaire que le javascript !

Dis donc

tu ne serais pas en train de dire du mal de javascript sur le forum javascript, fréquenté (essentiellement) par des développeurs javascript ?

Non sans rire c'est très faisable en js ^^

Code javascript :

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

1
2
3
4
5
 
// penser à rajouter la propriété "id" à ton tableau dans le fichier html
var tesLignes = document.getElementById("idDeTonTableau").getElementsByTagName("TR");
 
for (var i = 0 ; i < tesLignes.length ; ++i ) if (tesLignes[i].style.bgColor == "#33CC00") tesLignes[i].style.display="none";

(c'est écrit un peu à la va vite car je dois partir mais au pire on ne doit pas etre loin

)

**emmanuel.remy** · 31/03/2009, 18h28

Heu dis donc Romain, ce ne serait pas plutôt

Code :

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

if (tesLignes[i].style.backgroundColor ==

?

ERE

**Bovino** · 31/03/2009, 19h27

Ni l'un ni l'autre !

Code :

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

1
2
3
4
5
6
7
8
var mes_tr = document.getElementById('ma_table').getElementsByTagName('tr');
var mes_td;
for(var i = 0; i < mes_tr.length; i++){
    mes_td = mes_tr[i].getElementsByTagName('td');
    if(mes_td[2].style.backgroundColor.toUpperCase()==mes_td[3].style.backgroundColor.toUpperCase()==mes_td[4].style.backgroundColor.toUpperCase()=="#33CC00"){
        mes_tr[i].style.display = 'none';
    }
}

**RomainVALERI** · 01/04/2009, 09h23

Comme je le disais,

Envoyé par RomainVALERI

(c'est écrit un peu à la va vite car je dois partir mais au pire on ne doit pas etre loin

)

Bon ^^ Ca c'est fait...

Et effectivement il y avait deux problèmes...

- pour bgColor >>> petite erreur de mot-clef ^^ on oublie

- pour la boucle elle-même : effectivement Bovino je crois bien que tu as raison : je faisais le test sur la propriété backgroundColor des tr qui n'ont pas (ici) cette propriété ^^ c'est bien les td qu'ils faut balayer avec la boucle...

bon ben du coup on doit avoir quelque chose qui marche maintenant

**ben7875** · 01/04/2009, 10h14

Bonjour à tous, merci pour vos précieuses informations, je vais me repencher sur le problème et vous tiens informé.

**ben7875** · 01/04/2009, 11h19

hello,

alors j'ai regardé, le code à l'aide de fonctionner ( du moins j'ai pas d'erreur) mais je n'arrive pas à activé la fonction qui contient le code javascript.

J'aimerai pouvoir utiliser la fonction en cliquant sur Cacher pour cacher les lignes identiques, et Afficher pour les voir réapparaitre. Je ne comprends pas très bien le fonctionnement des click qui font appel aux fonction. d'ailleurs, est ce que je dois passer des arguments à ma fonction ? ..

"Afficher cacher les lignes identiques : Afficher / Cacher."

Voici ce qu'il en est du code :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<script type="text/javascript">
function couleur(){
	var mes_tr = document.getElementById('ma_table').getElementsByTagName('tr');
	var mes_td;
		for(var i = 0; i < mes_tr.length; i++){
		mes_td = mes_tr[i].getElementsByTagName('td');
			if(mes_td[2].style.backgroundColor.toUpperCase()==mes_td[3].style.backgroundColor.toUpperCase()==mes_td[4].style.backgroundColor.toUpperCase()=="#33CC00"){
			mes_tr[i].style.display = 'none';
			}
		}
}
</script>
 
<table id="ma_table" border=1 bgcolor="#D3D3D3" bordercolor="#000000">
<tr>
<td><b>Section</b></td>
<td><b>Clé</b></td>
<td><b>config1.ini</b></td>
<td><b>config2.ini</b></td>
<td><b>config3.ini</b></td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#FF3300;">xxx</td>
<td style="background-color:#FF3300;">xxx</td>
<td style="background-color:#FF3300;">xxx</td>
</tr>
</table>
 
<a href="javascript:onclick=couleur()">Afficher / Cacher les lignes identiques</a>

**Bovino** · 01/04/2009, 11h21

Code :

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

<a href="#" onclick="couleur();return false">

**ben7875** · 01/04/2009, 11h31

Code :

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

<a href="#" onclick="couleur();return false">toto</a>

ca ne donne rien

ps : je suis sur ie6

ps2: ne serait-ce pas la fonction qui ne marche pas ?

**RomainVALERI** · 01/04/2009, 12h48

Puisque tu es sur IE6 et que par conséquent c'est assez difficile de se baser sur les (misérables) messages d'erreur javascript, je te conseille d'installer Debugbar, qui est un des meilleurs moyens de débugger ses scripts sur IE6 (à mon sens, mais si vous avez mieux je suis preneur ^^)

Ca te permettra de déterminer avec plus de précision d'où vient le problème...

**Bovino** · 01/04/2009, 13h26

Le problème est que la valeur renvoyée pour les attributs de couleur est difficilement exploitable, je ne suis pas certain que tous les navigateurs renvoient le même format (hexa, rgb).

**RomainVALERI** · 01/04/2009, 13h37

Une idée de solution : au moment où ton tableau est généré (dynamiquement je suppose ^^), constitue un tableau global de booléens, et tu auras dans ce tableau des valeurs "true" pour les indices des lignes "vertes" et "false" pour les autres. Il te suffit alors de remplacer le test qui est fait dans la fonction couleur() : au lieu de comparer la couleur récupérée avec une chaine en dur ("#33CC00") tu auras directement les indices des lignes à masquer/afficher...

**ben7875** · 01/04/2009, 14h19

j'aimerai bien installé DebugBar et meme firefox, mais dans ma boite pour installer un soft sur un PC, faut 1 semaine d'acharnement ...
Si c'est ie6 qui pose problème, ca va pas être simple puisque toute la boite tourne sur ie !
En ce qui concerne ton idée de solution RomainVALERI, je n'ai pas bien saisie comment je peux testé sur ce test. que veux-tu que je mette à la place de #33CC00 ? ou bien ais-je mal saisi

ps : quelqu'un peut tester le code avec firefox et me dire s'il ca marche avec ce navigateur?

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<script type="text/javascript">
function couleur(){
	var mes_tr = document.getElementById('ma_table').getElementsByTagName('tr');
	var mes_td;
		for(var i = 0; i < mes_tr.length; i++){
		mes_td = mes_tr[i].getElementsByTagName('td');
			if(mes_td[2].style.backgroundColor.toUpperCase()==mes_td[3].style.backgroundColor.toUpperCase()==mes_td[4].style.backgroundColor.toUpperCase()=="#33CC00"){
			mes_tr[i].style.display = 'none';
			}
		}
}
</script>
 
<table id="ma_table" border=1 bgcolor="#D3D3D3" bordercolor="#000000">
<tr>
<td><b>Section</b></td>
<td><b>Clé</b></td>
<td><b>config1.ini</b></td>
<td><b>config2.ini</b></td>
<td><b>config3.ini</b></td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#FF3300;">xxx</td>
<td style="background-color:#FF3300;">xxx</td>
<td style="background-color:#FF3300;">xxx</td>
</tr>
</table>
 
<a href="#" onclick="couleur();">toto</a><br>

**ben7875** · 01/04/2009, 15h39

eureka !

Alors voila, je viens poster la solution globale et fonctionnelle, fonctionnant aussi bien sur firefox que sur ie..6 !
Ce pourrait même faire le sujet d'un bon tutoriel

Pour ce que tu disais bovino, les attributs de couleurs sont en effet difficilement exploitables, mais la seule difficulté repose sur l'attention portée au navigateur utilisé. En effet, à l'aide de ces fameux "alert()", j'ai n'ai pu que confirmer que i.e affichait mes couleurs en exa, mais firefox les affichaient en rgb. (merci d'ailleur pour m'avoir mis la puce à l'orreille bovino).

Autre point, j'ai remplacé les égales par des && dans =>

Code :

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

"if(mes_td[2].style.backgroundColor == "

J'ai également supprimé les toUpperCase qui n'avaient pas lieu d'être et j'ai également créer une 2e fonction pour pouvoir afficher ou cacher les champs de couleur identiques dans le tableau, à GOGO!

alors voila le code
javascript :

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
<script type="text/javascript">
function couleur_hide(){
	var mes_tr = document.getElementById('ma_table').getElementsByTagName('tr');
	var mes_td;
		for(var i = 1; i < mes_tr.length; i++){
		mes_td = mes_tr[i].getElementsByTagName('td');
			//alert(mes_td[2].style.backgroundColor);
			if(mes_td[2].style.backgroundColor == mes_td[3].style.backgroundColor &&
			mes_td[3].style.backgroundColor==mes_td[4].style.backgroundColor &&
			mes_td[3].style.backgroundColor=="#33cc00"){
				mes_tr[i].style.display = 'none';
			}
		}
}
 
function couleur_show(){
	var mes_tr = document.getElementById('ma_table').getElementsByTagName('tr');
 
	var mes_td;
		for(var i = 1; i < mes_tr.length; i++){
			mes_tr[i].style.display = 'block';
		}
}
</script>

html :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<table id="ma_table" border=1 bgcolor="#D3D3D3" bordercolor="#000000">
<tr>
<td><b>Section</b></td>
<td><b>Clé</b></td>
<td><b>config1.ini</b></td>
<td><b>config2.ini</b></td>
<td><b>config3.ini</b></td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section1</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 1</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 2</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 3</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#FF9933;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 4</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
<td style="background-color:#33CC00;">xxx</td>
</tr>
<tr>
<td style='background-color:#D3D3D3;'>section2</td>
<td style='background-color:#D3D3D3;'>clé 5</td>
<td style="background-color:#FF3300;">xxx</td>
<td style="background-color:#FF3300;">xxx</td>
<td style="background-color:#FF3300;">xxx</td>
</tr>
</table>

boutons hide/show :

Code :

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

1
2
3
 
<a href="#" onclick="couleur_hide();">HIDE</a>
<a href="#" onclick="couleur_show();">SHOW</a>

Voila, pour ma part j'ai appliqué mon code sur plusieurs fichiers de configurations avec un tableau finale à 5 fichiers et 1000 lignes ... ca marche nickel et instantanément ( je découvre là toute la puissance du JS

)
Pour terminer : Si vous voulez appliquer cela à un tableau dynamique de taille x;y il suffira de remplacer la boucle for par un bon gros WHILE !

Pour vraiment terminé : Merci aux personnes ayant prété attention à mon post : Bovino, RomainVALERI, emmanuel.remy

Et je vous dis à bientôt car je pense qu'il y aura avant la fin de l'année de nouveaux post de ma part

donc : ben7875, Invité de passage ou pas !