detection de cellules grâce à la couleur du texte

**destructive** · 03/05/2007, 17h57

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 :

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

**E.Bzz** · 03/05/2007, 18h26

Code :

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

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
Sinon, utilise les id des <td> ...

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

A+

**destructive** · 03/05/2007, 18h48

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

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
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 !!

**E.Bzz** · 03/05/2007, 19h05

Code :

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

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 :

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

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"

(oups compris : les "" en trop !!)

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

A+

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

**marcha** · 03/05/2007, 19h12

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 :

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

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

**E.Bzz** · 03/05/2007, 19h16

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

**E.Bzz** · 03/05/2007, 19h18

Envoyé par marcha

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

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

Pour le reste, on est en phase

A+

**marcha** · 03/05/2007, 19h18

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 ?

**marcha** · 03/05/2007, 19h21

Je viens de relire la question originale, et j'ai peut être pas bien compris le problème finalement

**E.Bzz** · 03/05/2007, 19h21

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

**goodpz** · 03/05/2007, 19h26

Je pense que le post #5 de marcha est correcte

**destructive** · 04/05/2007, 11h09

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 :

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
 <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 :

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

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 !!

**destructive** · 04/05/2007, 11h14

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...

**E.Bzz** · 04/05/2007, 11h24

Envoyé par destructive

j'ai testé ça

Et le reste ?

**destructive** · 04/05/2007, 11h46

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

**E.Bzz** · 04/05/2007, 11h49

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 ...

**destructive** · 04/05/2007, 12h59

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 ...

**marcha** · 04/05/2007, 18h45

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 :

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

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 :

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

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 ?

**destructive** · 04/05/2007, 19h48

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!

**destructive** · 07/05/2007, 11h06

salut,

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

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

detection de cellules grâce à la couleur du texte

JavaScript

Discussions similaires

Partager

Partager