Tableau desactivation

Résolu
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007 - 2 oct. 2006 à 13:39
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007 - 3 oct. 2006 à 10:17
Salut a tous
il y a quelque jour grace a un certain jedinoobewan
(perso c'est obiwan) bref j'ai mi en place dans mon code un truc du genre ca
<html>
<head>
<style>
tr.std
{
}
tr.over
{
background-color: blue;
border: #666666 1px solid;
}
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 que je voudrait c'est que l'orsque je click a l'exterieur du tableau la case selectionée se deselectionne
si quelqu'un sait quel procedure a suivre je doit adopter pour cela
le lui serait vraiment tres reconnaissan
(je debute aider moi SVP)
Merci a tous @++

10 réponses

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
2 oct. 2006 à 14:05
Bien le bonjour,


il faudrait pour faire cela que tu rajoutes un id à ta table ( par exemple "table_" ).


Ensuite sur le body :
Et enfin, tu rajoutes la méthode Javascript :
function clickOnbody(ev){
  // récupère le contrôle sur lequel on à cliquer
  var ctrl = ( document.all)? event.srcElement : ev.target;
  // si le contrôle cliquer est différent de TD alors on récupère la table et on vire les lignes sélectionnées
  if ( ctrl.tagName != "TD"){
   // récupère l'ensemble des balise tr de la table ayant pour id "table_"
   var trTot = document.getElementById("table_").getElementsByTagName("tr");
   // parcours la liste et les désactive.
   for ( var i =0; i < trTot.length; i++)
    changeClass(trTot[i].id, 'std');
  }
}
En théorie dès que tu clicks sur autre chose qu'une balise TD, il va te faire l'équivalent du onmouseout de tes balises TR.
En espérant avoir répondu à ta question.

[o-_-o]
3
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
2 oct. 2006 à 14:41
salut Zobilol
merci pour le coup de pousse
mais quand j'utilise ton code avec un tableau ca marche impec mais par contre mon code lui est composée
de plusieur tableau
j'ai donc bidouyer  un truc dans le genre
function clickOnbody(ev)
          {
     var ctrl = ( document.all)? event.srcElement : ev.target;
     if ( ctrl.tagName != "TD")
     {
      for ( var i =1; i < 16; i++)
      {
        var trTot = document.getElementById('table_'+i).getElementsByTagName("tr");
        if (trTot!= null)
        {
        for ( var i =0; i < trTot.length; i++)
        {
        changeClass(trTot[i].id, 'std');
       }
       }
      }
   }
  }

a ce moment il me met invalid argument (il se peut que le tableau soit vide meme pas de tr c pour
ca que j'ai mit  if (trTot!= null))
sait tu d'ou ca vient
merci @++
0
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
2 oct. 2006 à 14:58
Ouais, j'aurais peut être bien une petite idée...
Tu déclares deux fois une variable i dans une boucle imbriquée, à mon avis, il doit se larguer un peu en route avec les i..
Dans le deuxième for , remplace i par j ( par exemple ) et change bien ( c'est la connerie que je fais à tout les coups ) 
   changeClass(trTot[i].id, 'std');
en 
   changeClass(trTot[j].id, 'std');
Normalement tu n'as plus besoin de faire le test
 if (trTot!= null)
...
A toi de jouer.

[o-_-o]
0
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
2 oct. 2006 à 15:38
resalut
ce que je peux etre etourdi des fois il est vrai que ca marche mieux avec des lettre differente dans le for 
quoi qu'il en soi ca marche pour les essais avec le code que je t'ai donner 
mais pas avec le code dans lequelle je veut le metre  il perciste  a me dire invalide argument et je ne sais pas d'ou ca vien 
en tout cas je valide quand même la reponse qui sait ca peut aider quelqu'un d'autre 
je de dirait si j'ai plus de detail sur l'erreur et que je n'arrive vraiment pas a la résoudre
je te remercie de ton  aide 
@++  
0

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

Posez votre question
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
2 oct. 2006 à 15:52
resalut
en faite au cas tu aurai une soluce
je te dit quand meme pouqoi ca marche pas

c'est parce que j'ai des tableau imbriquer les un dans les autre 
genre comme ça
      ----

                <table width="50%" align="left">
         ----

            ,
          <table width=\"100%\" border=\"1\" bordercolor=\"#2D2D57\">
            ----

              <td>
               <table width=\"100%\" id=\"table_1\">
               <?php echo affiche_titre(\"Lundi\",$jour_lundi,\"formTL\",$Lundi);?>
                <?php echo affiche_visite_indiv($dateIL,$heureIL,$pilote_indivL,\"form_indivL\",\"form_indivL_An_List\",\"tr_566\");?>
             <?php echo affiche_bouton_indiv($dateIL);?>
             <?php echo $affiche_ligne_visite_lundi ; ?>
             <?php echo affiche_option($Lundi);?>
             <?php echo $affiche_ligne_visite_fournisseur_lundi ; ?>
             <?php echo $affiche_ligne_visite_famille_lundi ; ?>
             <?php echo $affiche_ligne_congee_lundi ; ?>

           

              </td>
            </tr> 
          </table>
                      ----

              <td>
               <table width=\"100%\" id=\"table_2\">
            <?php echo $affiche_ligne_evenement_lundi ; ?>
           

              </td>
            </tr> 
          </table>
            </td>
         </tr>
       </table>
       
                ----

                      <table width="100%" border="1" bordercolor="#2D2D57">
            ----

              ,
               <table width=\"100%\" id=\"table_3\">
               <?php echo affiche_titre(\"Jeudi\",$jour_jeudi,\"formTJ\",$Jeudi);?>
             <?php echo affiche_visite_indiv($dateIJ,$heureIJ,$pilote_indivJ,\"form_indivJ\",\"form_indivJ_An_List\",\"tr_567\");?>
             <?php echo affiche_bouton_indiv($dateIJ);?>
                <?php echo $affiche_ligne_visite_Jeudi ; ?>
                <?php echo affiche_option($Jeudi);?>
                <?php echo $affiche_ligne_visite_fournisseur_Jeudi ; ?>
             <?php echo $affiche_ligne_visite_famille_Jeudi ; ?>
             <?php echo $affiche_ligne_congee_Jeudi ; ?>

           

              </td>
            </tr> 
          </table>
                      ----

              <td>
               <table width=\"100%\" id=\"table_4\">
            <?php echo $affiche_ligne_evenement_Jeudi ; ?>
           

              </td>
            </tr> 
          </table>
            </td>
         </tr>
       </table>
         </td>
      </tr>
    </table>

si tu sais comment le faire marcher je suis preneur par contre tu m'excuse mais je retire le reponse acepter 
Merci beaucoup 
@++ 
0
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
2 oct. 2006 à 16:50
En fait, je suis une buse en php !
Mais se pourrait-il que dans le code généré tu ais une balise TR qui n'ai pas d'id ???
Si tel est le cas, il faudrait que tu rajoutes un test avant le
changeClass(trTot[j].id, 'std');
du genre :
if ( trTot[j].id != null )
   changeClass(trTot[j].id, 'std');

Après je crois que j'ai épuisé mon stock de solutions ;o)

[o-_-o]
0
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
3 oct. 2006 à 08:55
salut
ca marche pas mais je te remercie
d'avoir asseyer de m'aider
@+
0
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
3 oct. 2006 à 09:35
en faite tu n'a pas fait qu'esseyer tu m'a aider donc


merci


@++


 
0
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
3 oct. 2006 à 10:04
Au cas ou tu peux installer
https://addons.mozilla.org/firefox/1843/
(pour firefox 1.5 ) il te mettra à disposition un débugger et d'autres bricoles relativement util.

[o-_-o]
0
mouness Messages postés 97 Date d'inscription vendredi 21 juillet 2006 Statut Membre Dernière intervention 30 octobre 2007
3 oct. 2006 à 10:17
merci pour le truc


@++
0
Rejoignez-nous