Salut,
est-ce que tu as retouché le code de ta table ?
Version imprimable
Salut,
est-ce que tu as retouché le code de ta table ?
j'ai essayé de modifier les balises FONT ainsi :
mais est ce que sela peut faciliter vraiment la detection de couleur de textes pour les cellules ? de toute façon ça n'a rien changé :roll: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 <body> <a href="#" onclick="detectcolumn1("essai", "#FF0000")" title="cliquer pour cacher la colonne N°2">afficher ok seulement</a> <TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%"> <tr><a name="table_name"></a><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> <FONT COLOR=FFFFFF><B>Results</B></FONT></td> <td class="context1" bgcolor=blue align=centerstyle='color: #ffffff'><B>context1</B></FONT></td> <td id="col4" bgcolor=blue align=centerstyle='color: #ffffff'><B>context2</B></FONT></td> <td bgcolor=blue align=centerstyle='color: #ffffff'><B>context3</B></FONT></td> <td bgcolor=blue align=centerstyle='color: #ffffff'><B>context4</B></FONT></td> <td bgcolor=blue align=centerstyle='color: #ffffff'><B>context5</B></FONT></td> </tr> <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr> <tr class="essai" id="menu1" > <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> <A HREF="" ><FONT SIZE=2> porcedure1 </FONT></A> </td> <td class="context1" align=center>45</td> <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td> <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu2"> <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FF0000'>context1</td> <td align=centerstyle='color: #FF0000'><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu3"> <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FF0000'>context1</td> <td align=centerstyle='color: #FF0000'><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> </TABLE> </body>
Salut,
Comme point de départ je te suggère de tester ton code HTML au validateur
du w3c. http://validator.w3.org/
Une fois que tu aurra un code valide, il y aura beaucoup moins d'inconnues
pour aborder le problème coté javascript.
le code est maintenant bon, voici la page en intégral, avec un ancre qui doit permettre de cacher toutes les lignes contenant des cellules dont le texte est en rouge :
que peut-on modifier de plus ?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
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 <html> <head> <title>Untitled</title> <script type="text/javascript"> function detectcolumn(context, couleur) { var trs = document.getElementsByTagName("tr"); for(var row=0;row<trs.length;row++) { if (trs[row].className==context) { var tds = trs[row].getElementsByTagName("td"); for(var col=0;col<tds.length;col++) { if(tds[col].style.color==couleur){ trs[row].style.display = (trs[row].style.display=="none") ? "" : "none"; break; } else { continue; } } } } } </script> </head> <body> <a href="#" onclick="detectcolumn(essai, #FF0000)" title="cliquer pour cacher la colonne N°2">cacher les lignes contenant du texte en rouge</a> <TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%"> <tr><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> <FONT COLOR=FFFFFF><B>Results</B></FONT></td> <td class="context1" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td> <td id="col4" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td> </tr> <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr> <tr class="essai" id="menu1" > <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> <A HREF="" ><FONT SIZE=2> porcedure1 </FONT></A> </td> <td class="context1" align=center>45</td> <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td> <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu2"> <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FF0000'>context1</td> <td align=center><FONT COLOR="red"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu3"> <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FF0000'>context1</td> <td align=center><FONT COLOR="red"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> </TABLE> </body> </html>
Salut,
j'ai testé ton code sur FireFox, et j'ai du corrigé ceci pour que
cela fonctionne:
onclick="detectcolumn('essai', 'rgb(255, 0, 0)')"
il semblerait que quand on lit un style.color il aie une notation rgb
de plus il manque des guillemets dans ton code
Je te laisse essayer.
J'ai essayé le code est ça a l'air de marcher cette fois !!!:mouarf:
en conclusion le code sera ainsi :
bravo marcha !!:king:Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 function detectcolumn(context, couleur) { var trs = document.getElementsByTagName("tr"); for(var row=0;row<trs.length;row++) { if (trs[row].className==context) { var tds = trs[row].getElementsByTagName("td"); for(var col=0;col<tds.length;col++) { if(tds[col].style.color==couleur){ trs[row].style.display = (trs[row].style.display=="none") ? "" : "none"; break; } else { continue; //break; // si plusieurs td de couleur dans cette ligne, éviter de la réafficher ? } } } } }
mais c'est pas fini !!
quand j'essaye de tester l'exemple suivant, seule la ligne 2 est cachée (mais pas la ligne 3), il semble que la fonction s'arrête à la 3ème cellule !!
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 <html> <head> <title>Untitled</title> <script type="text/javascript"> function detectcolumn(context, couleur) { var trs = document.getElementsByTagName("tr"); for(var row=0;row<trs.length;row++) { if (trs[row].className==context) { var tds = trs[row].getElementsByTagName("td"); for(var col=0;col<tds.length;col++) { if(tds[col].style.color==couleur){ trs[row].style.display = (trs[row].style.display=="none") ? "" : "none"; break; } else { continue; } } } } } </script> </head> <body> <a href="#" onclick="detectcolumn('essai', 'rgb(255, 0, 0)')" title="cliquer pour cacher la colonne N°2">afficher ok seulement</a> <TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%"> <tr><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> <FONT COLOR=FFFFFF><B>Results</B></FONT></td> <td class="context1" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td> <td id="col4" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td> </tr> <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr> <tr class="essai" id="menu1" > <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> <A HREF="" ><FONT SIZE=2> porcedure1 </FONT></A> </td> <td class="context1" align=center>45</td> <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td> <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu2"> <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FF0000'>context1</td> <td align=center><FONT COLOR="red"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu3"> <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FFFFFF'>context1</td> <td align=center><FONT COLOR="red"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> </TABLE> </body> </html>
Salut,
oui c'est normal, car le code détecte les cellules qui ont un style color
et ne test pas si le rouge est produit par une balise FONT à l'intérieur.
n'as tu pas moyen de faire en sorte que le rouge soit toujours déterminé
par un style color dans les td ?
oui c'est vrai quand j'élimine les balises FONT et je les remplace par style='color: #FF0000' ça marche, voilà l'exemple précédent qui fonctionne bien cette fois:
merci pour cette clarification ;) !!!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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71 <html> <head> <title>Untitled</title> <script type="text/javascript"> function detectcolumn(context, couleur) { var trs = document.getElementsByTagName("tr"); for(var row=0;row<trs.length;row++) { if (trs[row].className==context) { var tds = trs[row].getElementsByTagName("td"); for(var col=0;col<tds.length;col++) { if(tds[col].style.color==couleur){ trs[row].style.display = (trs[row].style.display=="none") ? "" : "none"; break; } else { continue; } } } } } </script> </head> <body> <a href="#" onclick="detectcolumn('essai', 'rgb(255, 0, 0)')" title="cliquer pour cacher la colonne N°2">afficher ok seulement</a> <TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%"> <tr><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> <FONT COLOR=FFFFFF><B>Results</B></FONT></td> <td class="context1" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td> <td id="col4" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td> </tr> <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr> <tr class="essai" id="menu1" > <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> <A HREF="" ><FONT SIZE=2> porcedure1 </FONT></A> </td> <td class="context1" align=center>45</td> <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td> <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu2"> <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" align=center style='color: #FF0000'>context1</td> <td align=center style='color: #FF0000'><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu3"> <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FFFFFF'>context1</td> <td align=center style='color: #FF0000'><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> </TABLE> </body> </html>
bon, j'arrive trop tard pour proposer une solution...... :(
Tant pis en voilà une quand même :):
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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140 <html> <head> <title></title> <style type="text/css"> <!-- .rouge{ color: #FF0000; } .bleu{ color: #0000FF; } .gras{ font-weight: bold; } //--> </style> <script type="text/javascript"> <!-- function tabClasses(classe) { var exp = /(\w*[^\s])/gi; return classe.match(exp); } function detectLigne(classe, idTab) { var i, j, k, cacher; var tabC = new Array(), nC; var tab; var nTR, tTR; var nTD, tTD; tab = document.getElementById(idTab); tTR = tab.getElementsByTagName("tr"); nTR = tTR.length; for (i=0; i<nTR; i++) { tTD = tTR[i].getElementsByTagName("td"); nTD = tTD.length; cacher = false; for (j=0; j<nTD; j++) { tabC = tabClasses(tTD[j].className); if (tabC!=null) { nC = tabC.length; for (k=0; k<nC; k++) { if (tabC[k]==classe && classe!='#') cacher = true; } } } if (cacher) tTR[i].style.display = "none"; else tTR[i].style.display = ""; /*bug CSS sur les tableaux : ne pas utiliser la propriete block !!*/ } } //--> </script> </head> <body> <input type="button" value="Cacher lignes rouges" onclick="detectLigne('rouge', 'tab')" /> <input type="button" value="Cacher lignes bleues" onclick="detectLigne('bleu', 'tab')" /> <input type="button" value="Cacher lignes en gras" onclick="detectLigne('gras', 'tab')" /> <!-- Pour tout afficher entrer # comme valeur du 1er parametre --> <input type="button" value="Afficher tout" onclick="detectLigne('#', 'tab')" /> <br /><br /><br /><br /> <table border="1" id="tab" cellpadding="2" cellspacing="2"> <tr> <td class="bleu">bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> </tr> <tr> <td>bla bla</td> <td class="rouge">bla bla</td> <td>bla bla</td> <td>bla bla</td> <td class="bleu">bla bla</td> <td>bla bla</td> <td>bla bla</td> </tr> <tr> <td class="rouge gras">bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> </tr> <tr> <td class="gras" >bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> </tr> <tr> <td class="rouge">bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td>bla bla</td> <td class="bleu">bla bla</td> </tr> </table> </body> </html>
Le code utlise les classes des cellules (TD) pour afficher ou masque une ligne (TR). La fonction gère également le cas où plusieurs classes sont appliquées sur une cellule (gras et rouge) par exemple ;)
Une remarque destructive : écris tes balises HTML et leur paramètres en minuscules.
salut,
en revenant sur cet exemple j'ai voulu remplacé le champ de texte par un champ cliquable afin de cacher les lignes contenant du texte rouge si ce champ est coché, voilà ce que j'ai écrit comme fonction :
mais il manque qq chose ..Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 function detectcolumn(context, couleur, do_show) { var stl; if (do_show) stl = "none" else stl = ""; var trs = document.getElementsByTagName("tr"); for(var row=0;row<trs.length;row++) { if (trs[row].className==context) { var tds = trs[row].getElementsByTagName("td"); for(var col=0;col<tds.length;col++) { if(tds[col].style.color==couleur)&& (trs[row].style.display!=stl){ trs[row].style.display == stl; break; } else { continue; } } } } }
qq peut vérifier ça ?
voilà tout le code HTML :
merci .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
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function detectcolumn(context, couleur, do_show) { var stl; if (do_show) stl = "none" else stl = ""; var trs = document.getElementsByTagName("tr"); for(var row=0;row<trs.length;row++) { if (trs[row].className==context) { var tds = trs[row].getElementsByTagName("td"); for(var col=0;col<tds.length;col++) { if(tds[col].style.color==couleur)&& (trs[row].style.display!=stl){ trs[row].style.display == stl; break; } else { continue; } } } } } </script> </head> <body> <input type="checkbox" name="checkbox" id="checkbox" value="5" class="box" CHECKED onclick="detectcolumn('essai', 'rgb(255, 0, 0)', 'this.checked')"><label for="checkbox" title="show ok tests"> show ok tests </label> <TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%"> <tr><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2></FONT></A> <FONT COLOR=FFFFFF><B>Results</B></FONT></td> <td class="context1" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td> <td id="col4" bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td> <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td> </tr> <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">Titre1</a></B></td></tr> <tr class="essai" id="menu1" > <td align=left><A HREF="test1"><FONT SIZE=2></FONT></A> <A HREF="" ><FONT SIZE=2> porcedure1 </FONT></A> </td> <td class="context1" align=center>45</td> <td id="col1" align=center><FONT COLOR="green"><B>45</B></FONT></td> <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu2"> <td align=left><A HREF="test2"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" align=center style='color: #FF0000'>context1</td> <td align=center style='color: #FF0000'><B>100.0</B></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> <tr class="essai" id="menu3"> <td align=left><A HREF="test3"><FONT SIZE=2></FONT></A> <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td> <td class="context1" align=center>45</td> <td class="context1" style='color: #FFFFFF'>context1</td> <td align=center style='color: #FF0000'><B>100.0</B></td> <td align=center><FONT SIZE=2>date</FONT></td> <td align=center><FONT SIZE=2> time</FONT></td> </tr> </TABLE> </body> </html>