Tableau activation

Résolu

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007 - 28 sept. 2006 à 11:51
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007 - 2 oct. 2006 à 10:12

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

A voir également:

Tableau activation
Tableau php html - Conseils pratiques -PHP
Activation delphi 2016 ✓ - Forum Delphi / Pascal
Tableau de turbo 2 ✓ - Forum C
Afficher un tableau php - Forum PHP
Tableau gestion des clés ✓ - Forum VB.NET

15 réponses

Réponse 1 / 15

jediNoobiewan Messages postés 67 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 20 octobre 2010
28 sept. 2006 à 13:52

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 à
côté,


                     Super !!

                ,







</html>

Voilou @++ =)

Réponse 2 / 15

jediNoobiewan Messages postés 67 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 20 octobre 2010
28 sept. 2006 à 16:11

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 à
côté,


                     Super !!

                ,



             ----


    Le td lien est à
côté,


                     Super !!

                ,



             ----


    Le td lien est à
côté,


                     Super !!

                ,









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

Voilou =)

Réponse 3 / 15

jediNoobiewan Messages postés 67 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 20 octobre 2010
29 sept. 2006 à 09:44

<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énial
!!,



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



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



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


    Youpi
!!,


    Super !!,


    Génial
!!,



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



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



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


    Youpi
!!,


    Super !!,


    Génial
!!,











</html>

!! Voilou =)

Réponse 4 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
28 sept. 2006 à 15:23

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 15

jediNoobiewan Messages postés 67 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 20 octobre 2010
28 sept. 2006 à 15:42

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

Réponse 6 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
28 sept. 2006 à 15:51

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

Réponse 7 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
29 sept. 2006 à 07:17

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

Réponse 8 / 15

jediNoobiewan Messages postés 67 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 20 octobre 2010
29 sept. 2006 à 07:46

Avec plaisir =)

Réponse 9 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
29 sept. 2006 à 08:17

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

Réponse 10 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
29 sept. 2006 à 09:49

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

Réponse 11 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
29 sept. 2006 à 10:01

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

Réponse 12 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
29 sept. 2006 à 11:23

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énial !!,

             <tr id=\"td_2\" onmouseover=\"changeClass('td_2', 'over')\"
                             onmouseout=\"changeClass('td_2', 'std')\"
                             onmousedown=\"changeClass('td_2', 'click')\">
                 Youpi !!,
                 Super !!,
                 Génial !!,

             <tr id=\"td_3\" onmouseover=\"changeClass('td_3', 'over')\"
                             onmouseout=\"changeClass('td_3', 'std')\"
                             onmousedown=\"changeClass('td_3', 'click')\">
                 Youpi !!,
                 Super !!,
                 Génial !!,



                      <tr id=\"td_4\" onmouseover=\"changeClass('td_4', 'over')\"
                             onmouseout=\"changeClass('td_4', 'std')\"
                             onmousedown=\"changeClass('td_4', 'click')\">
                 Youpi !!,
                 Super !!,
                 Génial !!,

             <tr id=\"td_2\" onmouseover=\"changeClass('td_5', 'over')\"
                             onmouseout=\"changeClass('td_5', 'std')\"
                             onmousedown=\"changeClass('td_5', 'click')\">
                 Youpi !!,
                 Super !!,
                 Génial !!,

             <tr id=\"td_3\" onmouseover=\"changeClass('td_6', 'over')\"
                             onmouseout=\"changeClass('td_6', 'std')\"
                             onmousedown=\"changeClass('td_6', 'click')\">
                 Youpi !!,
                 Super !!,
                 Génial !!,



je te remercie obiwan c super simpa
@+

Réponse 13 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
29 sept. 2006 à 14:21

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 à côté,
                                  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 à côté,
                                  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 à côté,
                                  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
@+

Réponse 14 / 15

jediNoobiewan Messages postés 67 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 20 octobre 2010
29 sept. 2006 à 18:59

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é ++ =)

Réponse 15 / 15

mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
2 oct. 2006 à 10:12

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

Discussions similaires

hack

Turbo C++

tableau de nombre décimal vers tableau de nomber binaire

Etablir toutes les combinaisons possibles du Lotto

clé d'activation.

Votre réponse

Discussions similaires