IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

detection de cellules grâce à la couleur du texte


Sujet :

JavaScript

  1. #21
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Salut,

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

  2. #22
    Membre averti
    Inscrit en
    Mai 2006
    Messages
    55
    Détails du profil
    Informations forums :
    Inscription : Mai 2006
    Messages : 55
    Par défaut
    j'ai essayé de modifier les balises FONT 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
    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é

  3. #23
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    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.

  4. #24
    Membre averti
    Inscrit en
    Mai 2006
    Messages
    55
    Détails du profil
    Informations forums :
    Inscription : Mai 2006
    Messages : 55
    Par défaut
    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 : 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
     
    <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 ?

  5. #25
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    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.

  6. #26
    Membre averti
    Inscrit en
    Mai 2006
    Messages
    55
    Détails du profil
    Informations forums :
    Inscription : Mai 2006
    Messages : 55
    Par défaut
    J'ai essayé le code est ça a l'air de marcher cette fois !!!
    en conclusion le code sera 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
    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 !!
    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 : 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
     
    <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>

  7. #27
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    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 ?

  8. #28
    Membre averti
    Inscrit en
    Mai 2006
    Messages
    55
    Détails du profil
    Informations forums :
    Inscription : Mai 2006
    Messages : 55
    Par défaut
    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 : 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
    <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 !!!

  9. #29
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 662
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 662
    Par défaut
    bon, j'arrive trop tard pour proposer une solution......
    Tant pis en voilà une quand même :

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

  10. #30
    Membre averti
    Inscrit en
    Mai 2006
    Messages
    55
    Détails du profil
    Informations forums :
    Inscription : Mai 2006
    Messages : 55
    Par défaut
    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 : 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
    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 : 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
    <!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 .

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Modifier la couleur du texte d'une cellule d'un tableviewer.
    Par tatemilio2 dans le forum SWT/JFace
    Réponses: 4
    Dernier message: 27/06/2008, 08h28
  2. Réponses: 1
    Dernier message: 21/04/2008, 15h16
  3. couleurs de texte différentes dans une cellule
    Par mali29 dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 14/09/2007, 12h38
  4. Changement couleur cellule EXCEL en fonction du texte
    Par kikaillo dans le forum Macros et VBA Excel
    Réponses: 17
    Dernier message: 14/04/2006, 14h22
  5. [VBA EXCEL] changer la couleur du texte de cellules
    Par dume75 dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 05/02/2006, 23h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo