1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Comment afficher d'autres ligne en cliquant sur un lien

gregou9 Messages postés 44 Date d'inscription jeudi 16 mars 2006 Statut Membre Dernière intervention 19 décembre 2013 - 9 mai 2008 à 17:10
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 15 mai 2008 à 23:17
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

Réponse 1 / 1
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 16
15 mai 2008 à 23:17
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)
0
Rejoignez-nous