[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

)

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

**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';
    }
}

[DOM] supprimer ligne de couleur identique + tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager