detection de cellules grâce à la couleur du texte

Version imprimable

salut tout le monde,

j'ai voulu écrire une fonction qui classifie des lignes d'un tableau en utilisant la couleur du texte contenu dans l'une de leurs cellules ainsi :

1/ la fonction va scanner toutes les lignes de tableaux dans la page et examinera dans chaque ligne une cellule identifiée par sa classe.
2/ la fonction va détecter la couleur du texte que contient cette cellule, si la couleur est le rouge par exemple elle va cacher toute la ligne
voilà ce que j'ai écrit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function detectcolumn(identificateur, coulor) { var i; var tabTD = document.getElementsByTagName("tr"); var n = tabTD.length; for (i=0; i<n; i++) { var textcolor = document.getElementsByTagName("td").fgColor; if (tabTD[i].getElementsByTagName("td").className=="identificateur") { if (textcolor=="coulor") { tabTD[i].style.display = (tabTD[i].style.display=="none")?"":"none"; } } } }
mais ça marche pas !!

quelqu'un peut m'aider ?
merci

03/05/2007, 18h26
E.Bzz

Code:

var textcolor = document.getElementsByTagName("td")[i].style.color;

sinon, getElementsByTagName retourne un tableau (d'où le [i ]).

A toi de la caser dans une boucle :mrgreen:
Sinon, utilise les id des <td> ...

EDIT : ben non, c'est déjà le cas :aie:

A+

j'ai essayé mais ça marche pas encore, même en modifiant le code ainsi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function detectcolumn(identificateur, coulor) {
   var i;
 
   var tabTD = document.getElementsByTagName("tr");
   var n = tabTD.length;
 
  for (i=0; i<n; i++)
  {
 
   if (tabTD[i].getElementsByTagName("td").className=="identificateur") {
   var textcolor = document.getElementsByTagName("td")[i].style.color;
	if (textcolor=="coulor")
    {
 
     tabTD[i].style.display = (tabTD[i].style.display=="none")?"":"none";
    }
	}
  }
  i++
}

ça donne rien !!

Code:

1
2
3
4
5
6
7
8
function detectcolumn(identificateur, coulor) {
  var i; 
for (i=0; i<document.getElementsByTagName("td").length; i++)  
{  var textcolor = document.getElementsByTagName("td")[i].style.color; 
if (document.getElementsByTagName("td")[i].className==identificateur) {  
if (textcolor==coulor)  {  
document.getElementsByTagName("td")[i].style.display = (document.getElementsByTagName("td")[i].style.display=="none")?"":"none"; } 
 }  }  }

Version light :

Code:

1
2
3
4
5
6
7
8
9
function detectcolumn(identificateur, coulor) {
  var i; 
for (i=0; i<document.getElementsByTagName("td").length; i++)  {  
with(document.getElementsByTagName("td")[i]) {
var textcolor = style.color; 
if (className==identificateur) {  
if (textcolor==coulor)  {  
style.display = (style.display=="none")?"block":"none"; 
}  }  }  }  }

Mais je doute que tu ais une couleur "coulor" :mrgreen: (oups compris : les "" en trop !!)

... et l'inverse de "none" est "block" et pas "" ;)

A+

EDIT : qq retours à la ligne ça aide ...

Salut,

Tes paramètres ne devraient pas être entre guillemets dans ta fonction.
d'autre part i est l'index utilisé pour la liste des tr, il ne faut pas l'utiliser
comme tu le fait avec la liste de td.

Voici un réarrangement de ton code qui me semble plus juste (non-testé)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function detectcolumn(identificateur, couleur) { var trs = document.getElementsByTagName("tr"); for(var row=0;row<trs.length;row++) { if (trs[row].className!=identificateur) continue; var tds = trs[row].getElementsByTagName("td"); for(var col=0;col<tds.length;col++) { if(tds[col].style.color!=couleur) continue; trs[row].style.display = (trs[row].style.display=="none") ? "" : "none"; break; // si plusieurs td de couleur dans cette ligne, éviter de la réafficher ? } } }
Pour que cela fonctionne au niveau de la détection des couleurs
il faut impérativement que les td aient un attribut style='color: ...' et
non une couleur définie par le css.

EDIT: Posté pendant la réponse de E.Bzz :P

03/05/2007, 19h16
E.Bzz

Pas besoin de 2 boucles : getElementsByTagName("td") est un accès "direct" ...
03/05/2007, 19h18
E.Bzz

Citation:

Envoyé par marcha

EDIT: Posté pendant la réponse de E.Bzz :P

Oui.
Et complémentaires les réponses : toi tu as laissé les 2 boucles, et moi j'ai zappé le css qui sera pas pris en compte :aie:

Pour le reste, on est en phase ;)

A+
03/05/2007, 19h18
marcha

Citation:

Envoyé par E.Bzz

Pas besoin de 2 boucles : getElementsByTagName("td") est un accès "direct" ...

D'après ce que j'ai compris du problème, seuls les TD d'une couleur donnée
et qui sont dans un TR d'un className donné doivent provoquer le masquage
de la ligne, non ?
03/05/2007, 19h21
marcha

Je viens de relire la question originale, et j'ai peut être pas bien compris le problème finalement :oops:
03/05/2007, 19h21
E.Bzz

Citation:

Envoyé par marcha

D'après ce que j'ai compris du problème, seuls les TD d'une couleur donnée
et qui sont dans un TR d'un className donné doivent provoquer le masquage
de la ligne, non ?

J'ai un doute (sur le but général) :?
Mais le className semble bien être celui du <td> ...

On verra ;)
03/05/2007, 19h26
goodpz

Je pense que le post #5 de marcha est correcte

salut,

en faites la classname selon laquelle on va filtrer ne concerne que les cellules, suppossons ceci : il suffit qu'une cellule contienne un texte de couleur spécifique (le rouge par exemple) pour que la ligne toute entière sera cachée, voilà un exemple :

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
 <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><img src="path_for_image" width="15" height="10" border="0"></FONT></A> &nbsp; <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();">tests</a></B></td></tr>
 <tr id="menu1" >
 <td align=left><A HREF="test1"><FONT SIZE=2><img src="path_for_image" width="15" height="10" border="0"></FONT></A> &nbsp; <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 id="menu2">
 <td align=left><A HREF="test2"><FONT SIZE=2><img src="path_for_image" width="15" height="10" border="0"></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td id="col2" align=center><FONT COLOR="red"><B>45</B></FONT></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 id="menu3">
 <td align=left><A HREF="test3"><FONT SIZE=2><img src="path_for_image" width="15" height="10" border="0"></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure3</FONT></A> </td>
 <td class="context1" align=center>45</td>
 <td id="col2" align=center><FONT COLOR="red"><B>45</B></FONT></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>

dans cet exemple on va cahcer les lignes "procedure2" et procedure3" qui contiennet un texte en rouge, voilà comment j'ai modifié le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function detectcolumn(couleur) { 
  var trs = document.getElementsByTagName("tr");
  for(var row=0;row<trs.length;row++) {
   // if (trs[row].className!=identificateur) continue;
    var tds = trs[row].getElementsByTagName("td");
    for(var col=0;col<tds.length;col++) {
	//if (trs[row].className==identificateur)
    if(tds[col].style.color!=couleur) continue;
      trs[row].style.display = (trs[row].style.display=="none") ? "" : "none";
      break; // si plusieurs td de couleur dans cette ligne, éviter de la réafficher ?
    }
  }
}

j'ai testé ça mais il semble qu'il manque qq chose !!

04/05/2007, 11h14
destructive

j'ai supposé dans le cas précédent qu'on ne s'occuppe pas d'une cellule spécifique mais qu'il suffit qu'une seule cellule répond à la condition pour que toute la ligne sera cachée...
04/05/2007, 11h24
E.Bzz

Citation:

Envoyé par destructive

j'ai testé ça

Et le reste ? :?
04/05/2007, 11h46
destructive

le changement affectera normaelemnt toutes les lignes répondant au critère choisi, c'est le rôle de la boucle ..
04/05/2007, 11h49
E.Bzz

Citation:

Envoyé par destructive

le changement affectera normaelemnt toutes les lignes répondant au critère choisi, c'est le rôle de la boucle ..

Non, je parlais des autres solutions données ...
04/05/2007, 12h59
destructive

Citation:

Envoyé par E.Bzz

Et le reste ? :?

pour le reste ça n'a pas donné de résultats !!
je crois que c'est un problème de boucle ...:evilred:

Salut,

Ok, je n'avais pas imaginé que tu travaillait encore avec des
balises FONT et des attributs BGCOLOR. Cela complique pas mal
le javascript pour détecter les cellules de couleurs.

Je pense qu'il serrait profitable que tu modifies un peu le code de ta table
si c'est possible ?

Voici un exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <table> <tr> <td> <a href="path_for_data"> <img src="path_for_image" width="15" height="10" border="0"> </a><b>Results</b> </td> <td class="context1" style='color: #ffffff'>context1</td> <td id="col4" style='color: #ffffff'>context2</td> </tr> </table>
Ensuite tu donnes des styles CSS pour décorer ta table.
Code:

1 2 3 4 5 6 7 <style type='text/css'> table { width: 100%; border-collapse: collapse; } table tr td { background-color: blue; color: #ffff00; padding: 1px; margin: 0; border: 1px solid black; } etc... </style>
Est-ce que c'est possible pour toi de moderniser un peu ce code ?

04/05/2007, 19h48
destructive

j'ai changé le code mais ça marche pas aussi..je pense qu'il fallait s'assurer que la fonction est capable de cacher les lignes dès qu'elle détecte la couleur désigné .. j'ai doute à propos de continue et break ici!

salut,

j'ai modifié le code de la réponse 5 ainsi :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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; } } } } }
comme ça la fonction prendra comme paramètres la classe des lignes à scanner et la couleur réference, il faut que la ligne soit susceptible d'être cachée dès le premier texte trouvé qui a la couleur cherchée, et ensuite toutes les lignes semblables de la page pourront être cachées d'un coup, mais le code ne fonctionne pas encore !!
qq a une idée sur la source du problème ?

07/05/2007, 12h32
marcha

Salut,

est-ce que tu as retouché le code de ta table ?

j'ai essayé de modifier les balises FONT ainsi :

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> &nbsp; <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> &nbsp; <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> &nbsp; <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> &nbsp; <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>

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:

07/05/2007, 14h20
marcha

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 :

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> &nbsp; <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> &nbsp; <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> &nbsp; <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> &nbsp; <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>

que peut-on modifier de plus ?

07/05/2007, 15h07
marcha

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 :

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

bravo marcha !!:king:
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> &nbsp; <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> &nbsp; <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> &nbsp; <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> &nbsp; <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>

07/05/2007, 16h22
marcha

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:

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> &nbsp; <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> &nbsp; <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> &nbsp; <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> &nbsp; <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>

merci pour cette clarification ;) !!!

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 :

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

mais il manque qq chose ..
qq peut vérifier ça ?
voilà tout le code HTML :

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> &nbsp; <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> &nbsp; <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> &nbsp; <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> &nbsp; <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>

merci .