Bouton alternant 2 fonctions sur le même événement onClick

Version imprimable

Bonjour à tous,

J'ai un problème de grande débutante.
Je cherche à créer un seul bouton / image :
- qui change selon qu'il est cliqué (afficher - masquer - afficher -masquer etc) ;
- et qui permet d'afficher / masquer une ligne de tableau.
J'ai les deux fonctions, elles marchent impec'. Je les ai déjà grapillées sur ce site-même !!

Code du changement d'image du bouton
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var tab_image = new Array(2); for (var i=0; i< tab_image.length;i++) tab_image[i]= new Image(); tab_image[0].src='img/ensavoirplus.gif'; tab_image[1].src='img/ensavoirmoins.gif'; var n=0; function change() { n= ++n; if (n == tab_image.length) n=0; window.document.image.src=tab_image[n].src; }
Le code de l'afficher / masquer de la ligne de tableau:
Code:

1 2 3 4 5 6 7 8 9 10 function aff ( ) { tr = document.getElementById('tr2'); tr.style.display = ""; } function cach ( ) { tr = document.getElementById('tr2'); tr.style.display = "none"; }
Il y a dans le body un tableau et deux images qui ont les propriétés de cach() et aff().

Avez vous une idée pour qu'un seul bouton, changeant lui-même, permette d'afficher ou masquer une ligne de tableau ?
Je vous en remercie tous vivement !
Claire qui galère depuis hier ;-)

Code:

1
2
3
4
5
6
function bascule()
{
   var tr = document.getElementById('tr2');
   if (tr.style.display == "block") tr.style.display = "";
   else tr.style.display = "block";
}

24/03/2009, 13h14
claire67

Fonction bascule : ligne masquée au début
Bonjour !
Merci infiniment d'avoir répondu si vite et votre solution correspond tout à fait ... à ce que je n'aurais pas pensé ! ;-)
Je l'ai testée mais elle ne masquait pas de ligne.
Je l'ai transformée ainsi :
Code:

1 2 3 4 5 6 7 function bascule() { var tr = document.getElementById('tr2'); if (tr.style.display =="block") tr.style.display = "none"; else tr.style.display = "block"; }
et elle donne un résultat, mais sans doute faux. Au rafraichissement de la page, les deux lignes (tr1 et tr2) sont visibles, or j'aimerais que tr2 soit masquée au début. Je pense m'être tompée dans la fonction, mais où ?
Auriez-vous la gentillesse de regarder mon erreur ?
Merci vivement,
Claire
24/03/2009, 13h22
emmanuel.remy
Citation:

Envoyé par claire67

Au rafraichissement de la page, les deux lignes (tr1 et tr2) sont visibles, or j'aimerais que tr2 soit masquée au début

pour la ligne du tableau qui correspond à tr2:
Code:

1 2 <tr style="display:none">.... </tr>
ERE
24/03/2009, 14h43
claire67

1 pièce(s) jointe(s)

Merci !

Merci à vous deux qui m'avez si rapidement répondu. Tout marche impeccablement bien.

Je mets en pièce jointe le code complet et vous souhaite une bonne fin de journée,
Claire

En restant dans ta logique, mais en transformant la fonction bascule pour que tu puisse la réutiliser et en simplifiant ton tableau d'images (parce que dans ton cas c'est possible)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<script langage="JavaScript">
function bascule(tr)
{
   if (tr.style.display == "block") tr.style.display = "none";
   else tr.style.display = "block";
}
//pour deux petites images, faut pas s'embêter
var tab_image = ['img/ensavoirplus.gif', 'img/ensavoirmoins.gif'];
var n=0;
function change() {
  document.image.src = tab_image[++n % 2];
}
</script>
 
<body>
<table id="F">
   <tr id="tr1"><td>1-1</td></tr>
   <tr id="tr2" style="display:none"><td>2-1</td></tr>
</table>
 
    <a href="javascript: bascule(document.getElementById('tr2'));change()">
            <img name="image" src="img/ensavoirplus.gif" border=0 alt="+ d'info" /></a>
</body>
</html>

ERE

25/03/2009, 09h57
claire67

Bouton 2 fonctions : génial !

Bonjour !
Merci beaucoup pour cette simplification, c'est vrai, c'est plus simple ainsi puisqu'il n'y a que deux images.

Un grand merci !

Claire
25/03/2009, 12h04
emmanuel.remy

Citation:

Envoyé par claire67

Bonjour !
Merci beaucoup pour cette simplification, c'est vrai, c'est plus simple ainsi puisqu'il n'y a que deux images.

Un grand merci !

Claire

Mais c'est vraiment dédié à ton cas car il n'y a plus de préchargement des images.

ERE