Comment afficher d'autres ligne en cliquant sur un lien

Signaler
Messages postés
44
Date d'inscription
jeudi 16 mars 2006
Statut
Membre
Dernière intervention
19 décembre 2013
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
je vous explique le probleme:
j'ai un tableau dans lequel jaffiche un lien selon differents criteres et quand je clique sur ce lien il m'affiche differentes ligne en dessous d'une autre ligne. j'ai fais ma fonction js mais j'ai 2 problemes:
1) il ouvre mon div et le referme mais on peut le faire qu'une fois sinon il bloque
2) il n'affiche pas ce que je veux

Voici mon code:

FONCTION JAVASCRIPT:

function Suite(lien){

var objet = document.getElementById('popup'); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !

if(objet.style.display == "none" || !objet.style.display){

objet.innerHTML = "Ici le text que tu veux faire apparaître !";

objet.style.display = "block";

objet.style.overflow = "hidden";

lien.innerHTML = "-";

var hFinal = 200; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)

var hActuel = 0; //Hauteur initiale (la hauteur dès le début !)

var timer;

var fct = function ()

{

hActuel += 20; //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !

objet.style.height = hActuel + 'px';

if( hActuel > hFinal)

{

clearInterval(timer); //Arrête le timer

objet.style.overflow = 'inherit';

}

};

fct();

timer = setInterval(fct,40); //Toute les 40 ms

}else if(objet.style.display == "block"){

var hFinal = 0; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)

var hActuel = 200; //Hauteur initiale (la hauteur dès le début !)

var timer;

var fct = function ()

{

hActuel -= 20; //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !

objet.style.height = hActuel + 'px';

if( hActuel < hFinal)

{

clearInterval(timer); //Arrête le timer

objet.style.overflow = 'inherit';

objet.style.display = "none";

}

};

fct();

timer = setInterval(fct,40); //Toute les 40 ms

lien.innerHTML = "+";

}

}

</script>

HTML:

Compteur,

D&eacute;signation,

Index,

&nbsp;,

Conso (en Kwh),

<!--, , -->

----
, , N-1, R,

----

[[javascript:; +]]</gras></td>

<td>949</td>

<td>ELINKA - Bureaux</td>

<td></td>

<td style="border:none;background-color:white">&nbsp;</td>

<td>
9500
</td><td>9800</td><!--style="visibility:hidden"-->

</tr>

</table>

merci d'avance pour vos reponses.

1 réponse

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
J'ai déjà eu à traiter ce script, qui
sous la forme que tu as récupéré est plein de petit hic.
voila le code
complet revu et corrigé qu'il te restes à mettre en forme

pour la partie
SCRIPT
<script
type= "text/javascript">
function Suite( lien, div_ ){
  var objet =
document.getElementById( div_);
  if( !objet) return;
  if(
objet.style.display == "none" || !objet.style.display){

    objet.style.display = "block";
    objet.style.overflow = "hidden";

    lien.innerHTML = "-";
    var hFinal = 200; // Hauteur finale (la hauteur une fois que ça aura fini de
déplier !)
    var hActuel = 0; // Hauteur
initiale (la hauteur dès le début !)
    var timer;
    var
fct = function(){
      hActuel += 20; //Augmente la
hauteur de 20px (tu peux modifier) tous les 40ms !

      objet.style.height = hActuel + 'px';
      if (hActuel
> hFinal){
        clearInterval(timer); //Arrête
le timer
      }
    }
    fct()
    timer =
setInterval(fct, 40); //Toute les 40 ms

  }
  else if (objet.style.display == "block") {
    var
hFinal = 0; //Hauteur finale (la hauteur une fois que ça
aura fini de déplier !)
    var hActuel = 200; //Hauteur initiale (la hauteur dès le début !)

    var timer;
    var fct = function(){
      hActuel -=
20; //Augmente la hauteur de -20px (tu peux modifier)
tous les 40ms !
      if( hActuel > 0)

        objet.style.height = parseInt(hActuel) + 'px';
      if (hActuel
< hFinal){
        clearInterval(timer); //Arrête
le timer
        objet.style.display = "none";
      }

    }
    fct();
    timer = setInterval(fct, 40); //Toute les 40 ms
    lien.innerHTML = "+";

  }
}
</script>
tu noteras au passage l'ajout d'un
paramètre à la fonction qui permet ainsi de gérer plusieurs éléments différents,
je pense que tu trouveras les autres modifications rapidement...
 
et
pour la partie dans le BODY
<!-- ENTETE -->
----

   ,
  Compteur,

  Désignation,
  Index,

   ,
  Conso (en Kwh),

----

  ,

  N-1,
  R,

<!-- PREMIERE LIGNE -->
----

  [onclick="Suite(this,
'DIV_01');">+],

  771,
  ELINKA - Salle
Informatique,
  ,
   ,

  9500,
  9800,

----

    
id="DIV_01" style="display: none;">

  ,

<!-- DEUXIEME LIGNE -->
<tr
bgcolor=\"#66CCFF\">
  [onclick="Suite(this,
'DIV_02');">+],

  949,
  ELINKA - Bureaux,

  ,
   ,

  9500,
  9800,

----

    
id="DIV_02" style="display: none;">

  

l'appel de la
fonction permet d'ouvrir ou fermer un DIV contenu dans la TD de la ligne
suivante...

Il ne te restes plus qu'a régler les petits problèmes qui ne
manqueront pas d'apparaîtrent...

Allez ENJOY

;O)