Tableau activation

[Résolu]
Signaler
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007
-
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007
-
Bonjour a tous
Je cherche a faire avec un tableau un truc genre :active(changer le font de couleur ou encore surligner le contour de la ligne) comme un lien qoi mais  en plus que ce dernier rester activer jusqu'a l'activation d'une autre ligne
si quelqu'un a deja vue un code ou meme un tutoriel sur ce genre de chose ce serai vraiment simpa
d'autan plus que je ne connai pas une cacahouette au CSS en gros je debute
je vous remercie tous
@+

15 réponses

Messages postés
67
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
20 octobre 2010

Hello,


Tout d'abord tu défini les styles soit dans un fichier externe soit
dans la partie <head> de la page, ensuite tu fais une fonction
javascript pour change de classe et ta table. Ce qui donne :


<html>

    <head>

          <style>

             td.std{

                  
background-color: gray;

                  
border: 2px solid black;

             }


             td.over{

                  
background-color: blue;

                  
border: 2px solid black;

             }


             td.click{

                  
background-color: gray;

                  
border: 2px solid red;

             }

          </style>

          <script type="text/javascript">

          function changeClass(p_id, p_class){

               
var l_td = document.getElementById(p_id);

                l_td.className = p_class;

          }

          </script>

    </head>

   

                      ----

            
    Le td lien est &agrave;
c&ocirc;t&eacute;,

            
                     Super !!

                ,

            

        


   

</html>

Voilou @++ =)
Messages postés
67
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
20 octobre 2010

Rere,

<html>

    <head>

          <style>

             td.std{

                  
background-color: gray;

                  
border: 2px solid black;

             }


             td.over{

                  
background-color: blue;

                  
border: 2px solid black;

             }


             td.click{

                  
background-color: gray;

                  
border: 2px solid red;

             }

          </style>

          <script type="text/javascript">

           function changeClass(p_id, p_class){

               
var l_td = document.getElementById(p_id);

                l_td.className = p_class;

                if(p_class == "click"){

                     
l_td.onmouseout = function(){};

                     
// Et si tu veux que ça reste quand la souris revient

                     
l_td.onmouseover = function(){};

                      l_nb = document.getElementById('nb_td').value;

                     
for(i = 1; i <= l_nb; i++){

                     
    l_td_tmp = document.getElementById('td_'+i);

                     
    if(l_td_tmp != l_td){

   
                     
    l_td_tmp.onmouseout =
function(){changeClass(this.id, 'std')};

   
                     
    l_td_tmp.onmouseover =
function(){changeClass(this.id, 'over')};

   
                     
    l_td_tmp.className = 'std';

   
                    
}

                      }

                }

          }

          </script>

    </head>

   

                      ----

            
    Le td lien est &agrave;
c&ocirc;t&eacute;,

            
                     Super !!

                ,

            

             ----

            
    Le td lien est &agrave;
c&ocirc;t&eacute;,

            
                     Super !!

                ,

            

             ----

            
    Le td lien est &agrave;
c&ocirc;t&eacute;,

            
                     Super !!

                ,

            

        


        

   

</html>
Je mets le nombre total de td dans un champ caché car la fonction getElementsByName ne doit plus être utilisée ^^

Voilou =)
Messages postés
67
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
20 octobre 2010

<html>

    <head>

          <style>

             td.stdr{

                  
background-color: gray;

                  
border-right: 2px solid black;

                  
border-bottom: 1px solid black;

                  
border-top: 1px solid black;

                  
border-left: 1px solid black;

                   cursor: pointer;

             }


             td.overr{

            
       border-right: 2px solid black;

                  
border-bottom: 1px solid black;

                  
border-top: 1px solid black;

                  
border-left: 1px solid black;

                  
background-color: blue;

                   cursor: pointer;

             }


             td.clickr{

                  
background-color: gray;

                  
border-right: 2px solid red;

                  
border-bottom: 1px solid red;

                  
border-top: 1px solid red;

                  
border-left: 1px solid black;

                   cursor: default;

             }

            

             td.std{

                  
background-color: gray;

                  
border-right: 1px solid black;

                  
border-bottom: 1px solid black;

                  
border-top: 1px solid black;

                  
border-left: 1px solid black;

                   cursor: pointer;

             }


             td.over{

                  
background-color: blue;

                  
border-right: 1px solid black;

                  
border-bottom: 1px solid black;

                  
border-top: 1px solid black;

                  
border-left: 1px solid black;

                   cursor: pointer;

             }


             td.click{

                  
background-color: gray;

                  
border-right: 1px solid black;

                  
border-bottom: 1px solid red;

                  
border-top: 1px solid red;

                  
border-left: 1px solid black;

                   cursor: default;

             }

             td.stdl{

                  
background-color: gray;

                  
border-right: 1px solid black;

                  
border-bottom: 1px solid black;

                  
border-top: 1px solid black;

                  
border-left: 2px solid black;

                   cursor: pointer;

             }


             td.overl{

                  
background-color: blue;

                  
border-right: 1px solid black;

                  
border-bottom: 1px solid black;

                  
border-top: 1px solid black;

                  
border-left: 2px solid black;

                   cursor: pointer;

             }


             td.clickl{

                  
background-color: gray;

                  
border-right: 1px solid black;

                  
border-bottom: 1px solid red;

                  
border-top: 1px solid red;

                  
border-left: 2px solid red;

                   cursor: default;

             }

             table{

                 border: 1px solid black;

             }

          </style>

          <script type="text/javascript">

           function changeClass(p_id, p_class){

                   var l_td;

                   var l_class_suffix;

          
        // Recuperation du nombre de td

          
        var l_nb_td =
document.getElementById('nb_td').value;

          
        // Boucle sur les td de la ligne
concernee

          
        for(i = 1; i <= l_nb_td; i++){

          
            l_td =
document.getElementById(p_id+"_"+i);

          
            // Pour les
bordures on est oblige de trouver les extremites

          
            l_class_suffix
= "";

          
            if(i == 1){

          
           
    l_class_suffix = "l";

          
            }else if(i==
l_nb_td){

          
           
    l_class_suffix = "r";

                       }

          
            // On applique
la classe qu'il faut

          
            l_td.className
= p_class+l_class_suffix;

                   }

                   // On recupere le tr

          
        var l_tr =
document.getElementById(p_id);

                   if(p_class == "click"){

          
              // On
ne veut pas que ça change sur un mouseover

                     
l_tr.onmouseout = function(){};

                     
// Et si tu veux que ça reste quand la souris revient

                     
l_tr.onmouseover = function(){};

                     
// On recupere le nombre de tr

                     
l_nb = document.getElementById('nb_tr').value;

                     
for(i = 1; i <= l_nb; i++){

                     
    // On recupere un tr

                     
    l_tr_tmp = document.getElementById('td_'+i);

                     
    // S'il est different de celui concerne on remet les
fonctions

                     
    // Et on applique la bonne classe au td

                     
    if(l_tr_tmp != l_tr){

   
                     
    l_tr_tmp.onmouseout =
function(){changeClass(this.id, 'std')};

   
                     
    l_tr_tmp.onmouseover =
function(){changeClass(this.id, 'over')};

   
                     
    for(j = 1; j <= l_nb_td; j++){

   
                     
        l_td =
document.getElementById(l_tr_tmp.id+"_"+j);

           
          
            l_class_suffix
= "";

           
          
            if(j == 1){

           
          
           
    l_class_suffix = "l";

           
          
            }else if(j ==
l_nb_td){

           
          
           
    l_class_suffix = "r";

           
          
            }

           
          
            l_td.className
= "std"+l_class_suffix;

   
                     
    }

   
                    
}

                      }

                }

          }

          </script>

    </head>

   

                      <tr id=\"td_1\" onmouseover=\"changeClass('td_1', 'over')\"

            
           
    onmouseout=\"changeClass('td_1', 'std')\"

            
           
    onmousedown=\"changeClass('td_1', 'click')\">

            
    Youpi
!!,

            
    Super !!,

            
    G&eacute;nial
!!,

            

             <tr id=\"td_2\" onmouseover=\"changeClass('td_2', 'over')\"

            
           
    onmouseout=\"changeClass('td_2', 'std')\"

            
           
    onmousedown=\"changeClass('td_2', 'click')\">

            
    Youpi
!!,

            
    Super !!,

            
    G&eacute;nial
!!,

            

             <tr id=\"td_3\" onmouseover=\"changeClass('td_3', 'over')\"

            
           
    onmouseout=\"changeClass('td_3', 'std')\"

            
           
    onmousedown=\"changeClass('td_3', 'click')\">

            
    Youpi
!!,

            
    Super !!,

            
    G&eacute;nial
!!,

            

        


        

        

   

</html>


!! Voilou =)
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

salut maitre jedi


c'est vraiment super simpa ce que t'a fait la merci


mais il y a un petit ik je voudrait que si onmousedown est activer alors le onmouseout ne s'active pas
comment je fait dans ce  cas le je t'en remercie d'avance
merci
et que la force soit avec toi jediNoobiewan
@+
Messages postés
67
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
20 octobre 2010

Dans ta fonction javascript :

function changeClass(p_id, p_class){

                var l_td = document.getElementById(p_id);

                l_td.className = p_class;

                if(p_class == "click"){

                     
l_td.onmouseout = function(){};

                     
// Et si tu veux que ça reste quand la souris revient

                     
l_td.onmouseover = function(){};

                }

}


Voilou, voilou =)
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

salut
en faite non tu sais qoi on enleve tout onmouseover="changeClass('td_1', 'over')" onmouseout="changeClass('td_1', 'std')"  onmouseup="changeClass('td_1', 'over')" commen je fait pour que la classe de tout les autre soi "std" quand je fait  onmousedown="changeClass('td_1', 'click')" sur n'importe la quel

merci beaucoup jediNoobiewan @+
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

salut
Grand tu sait qoi la classe avec un tres tres grand C
nan serieu tu m'a enlever une grosse epine du pied je t'en
remerci beaucoup
a Bientot
et que la force soit avec toi @+
Messages postés
67
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
20 octobre 2010

Avec plaisir =)
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

Excuse moi obiwan
mais une derniere question et apres c'est promi je ne t'enuirer plus, je voudrais s'il te plais savoir comment faire pour l'adapter au tr au lieu du td
j'ai essayer un truc mais il me dit "l_td_tmp is null or not an object"
(rajoute le sur le forum ca pourait servir a quelqu'un d'autre)
Merci beaucoup obiwan
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

salut
tu sais qoi obiwan c bon pour le tr excuse moi mais je devrait chercher un peu plus longtemp avant de te demander excuse moi
mais j'ai une question encore et encore une question excuse moi mais quand je veux faire ca sur deux tableau au niveau du premier ca marche mais  pas pour le second (il reste activer marlgrée tout)(onmouseover = Ok) serait tu par hasard d'ou vien le probleme
je te remercie et cette j'ai quand meme cher cher un peu plus longtemp
merci obiwan
@+
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

resalut (ce n'est pas une question)


tu a quand meme du merite la
C
lasse
d'autant plus d'aider un parfaite inconnue comme ca alors qu'on ne se connai meme pas vraiment bien je ne te connai pas mais que tu perde ton temp avec moi pour des chose comme ca vraiment tu doit etre un mec bien  je te remercie obiwan
une petite question tous de meme si c'est pas indiscres tu habite dans quelle ville (cite moi la plus proche grande ville si elle est petite) (t pas obliger de repondre ) 
et merci pour tout obiwan
@+ 
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

salut
pour info la question precedente c pour un tableau genre comme ca
             <tr id=\"td_1\" onmouseover=\"changeClass('td_1', 'over')\"
                             onmouseout=\"changeClass('td_1', 'std')\"
                             onmousedown=\"changeClass('td_1', 'click')\">
                 Youpi !!,
                 Super !!,
                 G&eacute;nial !!,
            
             <tr id=\"td_2\" onmouseover=\"changeClass('td_2', 'over')\"
                             onmouseout=\"changeClass('td_2', 'std')\"
                             onmousedown=\"changeClass('td_2', 'click')\">
                 Youpi !!,
                 Super !!,
                 G&eacute;nial !!,
            
             <tr id=\"td_3\" onmouseover=\"changeClass('td_3', 'over')\"
                             onmouseout=\"changeClass('td_3', 'std')\"
                             onmousedown=\"changeClass('td_3', 'click')\">
                 Youpi !!,
                 Super !!,
                 G&eacute;nial !!,
            
        

                      <tr id=\"td_4\" onmouseover=\"changeClass('td_4', 'over')\"
                             onmouseout=\"changeClass('td_4', 'std')\"
                             onmousedown=\"changeClass('td_4', 'click')\">
                 Youpi !!,
                 Super !!,
                 G&eacute;nial !!,
            
             <tr id=\"td_2\" onmouseover=\"changeClass('td_5', 'over')\"
                             onmouseout=\"changeClass('td_5', 'std')\"
                             onmousedown=\"changeClass('td_5', 'click')\">
                 Youpi !!,
                 Super !!,
                 G&eacute;nial !!,
            
             <tr id=\"td_3\" onmouseover=\"changeClass('td_6', 'over')\"
                             onmouseout=\"changeClass('td_6', 'std')\"
                             onmousedown=\"changeClass('td_6', 'click')\">
                 Youpi !!,
                 Super !!,
                 G&eacute;nial !!,
            
        

je te remercie obiwan c super simpa
@+
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

resalut
une petite ( 
pour la ligne j'ai reussie a le faire marcher comme ca
<html>
    <head>
     <style>
     tr.std
     {
      
        }
        tr.over
        {
   background-color: blue;
        }
        tr.click
        {
         background-color: red;
        }
     </style>
     <script type="text/javascript">
           function changeClass(p_id, p_class){
                var l_tr = document.getElementById(p_id);
                l_tr.className = p_class;
                if(p_class == "click"){
                      l_tr.onmouseout = function(){};
                      // Et si tu veux que ça reste quand la souris revient
                      l_tr.onmouseover = function(){};
                      l_nb = document.getElementById('nb_td').value;
                      for(i = 1; i <= l_nb; i++){
                          l_tr_tmp = document.getElementById('tr_'+i);
                          if(l_tr_tmp != l_tr){
                              l_tr_tmp.onmouseout = function(){changeClass(this.id, 'std')};
                              l_tr_tmp.onmouseover = function(){changeClass(this.id, 'over')};
                              l_tr_tmp.className = 'std';
                         }
                      }
                }
          }
       </script>
    </head>
   
                      <tr id=\"tr_1\" onmouseover=\"changeClass('tr_1', 'over')\"
                                 onmouseout=\"changeClass('tr_1', 'std')\"
                                 onmousedown=\"changeClass('tr_1', 'click')\"
                                 class=\"std\">
                 Le td lien est &agrave; c&ocirc;t&eacute;,
                                  Super !!
                ,
            
             <tr id=\"tr_2\" onmouseover=\"changeClass('tr_2', 'over')\"
                                 onmouseout=\"changeClass('tr_2', 'std')\"
                                 onmousedown=\"changeClass('tr_2', 'click')\"
                                 class=\"std\">
                 Le td lien est &agrave; c&ocirc;t&eacute;,
                                  Super !!
                ,
            
             <tr id=\"tr_3\" onmouseover=\"changeClass('tr_3', 'over')\"
                                 onmouseout=\"changeClass('tr_3', 'std')\"
                                 onmousedown=\"changeClass('tr_3', 'click')\"
                                 class=\"std\">
                 Le td lien est &agrave; c&ocirc;t&eacute;,
                                  Super !!
                ,
            
        

        
   
</html>
ce qui est plus cour mais les contour eux ne marche pas je sai pas pourqoi
mais ca n'a pas d'inportance je n'en est pas besoin 
ca donc j'ai besoin c'est de le faire sur plusieur tableau  comme ci dessus
je te remercie obiwan que tu me reponde ou pas c pas grave
@+
Messages postés
67
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
20 octobre 2010

Plop,

Mmmm, je ne voi pas pourquoi ça ne fonctionnerai pas avec d'autre tableau, surtout si tu gardes bien un numéro croissant d'identifiant, le problème viens peut être du nombre de tr que tu n'a pas bien fixé, fin...je dis ça mais en même temps me faudrait le code entier pour te dire ^^

Allé ++ =)
Messages postés
97
Date d'inscription
vendredi 21 juillet 2006
Statut
Membre
Dernière intervention
30 octobre 2007

salut
tu avait raison en faite
j'ai modifier ca pour que ca marche correctement cher moi
for(i = 1; i <= l_nb; i++){
                          l_tr_tmp = document.getElementById('tr_'+i);
                          if(l_tr_tmp != l_tr){
                             if(l_tr_tmp !=null){

                              l_tr_tmp.onmouseout = function(){changeClass(this.id, 'std')};
                              l_tr_tmp.onmouseover = function(){changeClass(this.id, 'over')};
                              l_tr_tmp.className = 'std';
                              }
                         }
                      }
je te remercie de ton aide
@++