detection de cellules grâce à la couleur du texte

Version imprimable

Voir 40 message(s) de cette discussion en une page

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, 17h26
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, 18h16
E.Bzz

Pas besoin de 2 boucles : getElementsByTagName("td") est un accès "direct" ...
03/05/2007, 18h18
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, 18h18
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, 18h21
marcha

Je viens de relire la question originale, et j'ai peut être pas bien compris le problème finalement :oops:
03/05/2007, 18h21
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, 18h26
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, 10h14
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, 10h24
E.Bzz

Citation:

Envoyé par destructive

j'ai testé ça

Et le reste ? :?
04/05/2007, 10h46
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, 10h49
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, 11h59
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, 18h48
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 ?

Voir 40 message(s) de cette discussion en une page