Afficher un element de tableau en masquant le precedant

Version imprimable

Bonsoir,

Je souhaiterais savoir comment faire pour que un élément se masque lorsqu'un autre s'affiche ?

En faite l orque on clique sur un lien cela affiche un élément d un tableau <tr> </tr>

Mais si on clic sur un second élément a afficher je voudrais que le premier se masque automatiquement sans avoir besoin de cliquer dessus. en gros je voudrais que seule un seule élément s'affiche en masquant les précédants.

Je vous montre en gros le code que j ai fait jusque la, je ne connait pas trop le javascript, je débute et je trouve pas comment le compléter.

Merci pour votre aide
Code:

1 2 3 4 5 6 <script language="JavaScript" type="text/JavaScript"> //afficher/marquer function afficher(div) { with (document.getElementById(div).style) display = (display == 'none')? '' : 'none'; } </script>
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 31 32 33 34 35 <table border="1" bgcolor="white" width="550" align="center" style="border-collapse: collapse"> <tr> <th colspan="4"><a href="javascript:afficher('z1');" Title="Afficher l'atelier de peinture">Atelier de peinture</a></th> </tr> <tr> <th><a href="javascript:afficher('z2');">Carrosserie</a></th> <th><a href="javascript:afficher('z3');">Par-choc</a></th> <th><a href="javascript:afficher('z4');">Prise de toit</a></th> <th><a href="javascript:afficher('z5');">Bas de caisse</a></th> </tr> <tr id="z1" style="display:none;"> <td>code</td> <td>code</td> <td>code</td> <td>code</td> </tr> <tr id="z2" style="display:none;"> <td>code</td> <td colspan="3"></td> </tr> <tr id="z3" style="display:none;"> <td></td> <td>code</td> <td colspan="2"></td> </tr> <tr id="z4" style="display:none;"> <td colspan="2"></td> <td>code</td> <td></td> </tr> <tr id="z5" style="display:none;"> <td colspan="3"></td> <td>code</td> </tr> </table>

Re,

bas j ai modifier tout le code javascript et j ai réussi a obtenir le résultat souhaiter, mais je doit avouer que c est pas génial ce que j ai fait, je suis sur que il doit y avoir une possibilité de faire çà en moins de ligne de code que ce que j ai fait.

si vous avez mieux a me proposer je serais ravie sinon bas çà fonctionne ce que j ai fait là, je vais donc pas m'en plaindre, mais je suis pas super satisfait.

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
31
32
33
34
35
36
37
38
function afficher(div) {
var displays = document.getElementById(div).style.display;
if(div == '1') { 
	document.getElementById('1').style.display = '';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = 'none';
}
if(div == '2') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = '';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = 'none';
}
if(div == '3') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = '';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = 'none';
}
if(div == '4') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = '';
	document.getElementById('5').style.display = 'none';
}
if(div == '5') { 
	document.getElementById('1').style.display = 'none';
	document.getElementById('2').style.display = 'none';
	document.getElementById('3').style.display = 'none';
	document.getElementById('4').style.display = 'none';
	document.getElementById('5').style.display = '';
}
}

Code:

1
2
3
4
function afficher(div) {
for(var i=1;i<6;i++){ 
	document.getElementById('i').style.display = div==i?'':none;
}

07/11/2008, 15h01
dad72
Merci beaucoup, en effet ce que j ai fait prend trop de ligne de code, je m'en doutais.

Par contre j ai remplacer le code par celui ci et il y avais une petite erreur:

Code:

document.getElementById(i).style.display = (div == i)? '' : 'none';

dans la parenthèse du getElementById(i) au lieu de getElementById('i') .Il manquer l'accolade de fermeture de la fonction aussi. Mais ce sont des détaille, cela ma deja beaucoup aider ce code et surtout raccourci ce que j avais fait en second.

resterais bien une dernière petite chose :
comment faire pour que en recliquan sur un élément ouvert, il se referme, car la si on en ouvre 1 on ne peux plus le re masquer, par contre çà fonctionne bien au passage a un autre élément le premier se referme bien.

Comment compéter la fonction s il vous plais ?
Code:

1 2 3 4 5 function afficher(div) { for(var i = 1; i < 6; i++){ document.getElementById(i).style.display = (div == i)? '' : 'none'; } }
07/11/2008, 15h32
Bovino
Effectivement, il y avait ces deux erreurs dans mon code... :oops:

Sinon
Code:

1 2 3 4 5 function afficher(div) { for(var i = 1; i < 6; i++){ document.getElementById(i).style.display = (div == i)? (document.getElementById(i).style.display=='' ? 'none' : '') : 'none'; } }
ou

Code:

document.getElementById(i).style.display = (div == i && document.getElementById(i).style.display ='none')? '' : 'none';
07/11/2008, 15h51
dad72

Grand merci pour votre aide, çà fonctionne parfaitement bien.

Je résouds donc