affichage de <div> en fonction d'un choix

Version imprimable

bonjour

j'ai trouvez un exemple (qui marche) et que j'aimerai bien adapter mais après plusieurs essais infructueux je demande un coup de pouce

j'ai une liste deroulante et en fonction du choix (0 ; 1 ou 2) je voudrais deplier une balise <div>

code javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
  <script type="text/javascript">
  function nbrjour(n) {
     for (var i=0; i<=2; i++) {
         if (i<=n) {
            document.getElementById("jour"+i).style.display="block";
         } else {
            document.getElementById("jour"+i).style.display="none";
         }
     }
  }
  </script>

code html

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
 
<form action="#" method="post" name="frm">
<table border=0 summary="">	   
	<tr align=center>
		<td><b>Mot de passe</b><br><input type="password" name="pwd" size="8" maxlength="8"></td>
		<td><br>
		<select name="nbr_jour" onchange="nbrjour(this.value);">
		<option value="0">Nbr de jours</option>
		<option value="1">1 Journée</option>
		<option value="2">2 Jours ou +</option>
        </select>
      </td>	 
	  <div style="display:block" id="jour0">
		<td align="center">&nbsp;</td>
		<td align="center">&nbsp;</td>
	  </div>		  
	  <div style="display:none" id="jour1">
		<td align="center"><b>Du</b><br><input type="text" name="d" readonly size="10"><a href="#" onClick=" window.open('randopei/calendrier.php?frm=frm&ch=d','calendrier','width=350,height=160,scrollbars=0').focus();"><img src="randopei/petit_calendrier.gif" border="0"/></a></td>
		<td align="center">&nbsp;</td>
	  </div>		  
	  <div style="display:none" id="jour2">
		<td align="center"><b>Du</b><br><input type="text" name="d" readonly size="10"><a href="#" onClick=" window.open('randopei/calendrier.php?frm=frm&ch=d','calendrier','width=350,height=160,scrollbars=0').focus();"><img src="randopei/petit_calendrier.gif" border="0"/></a></td>
		<td align="center"><b>Au</b><br><input type="text" name="d1" readonly size="10"><a href="#" onClick=" window.open('randopei/calendrier.php?frm=frm&ch=d1','calendrier','width=350,height=160,scrollbars=0').focus();"><img src="randopei/petit_calendrier.gif" border="0"/></a></td>
	  </div>	
	</tr>
	<tr>
		<td colspan="4" align="center">
		<b>Décrivez votre projet le plus précisement possible.</b><br> 
		<textarea name="descriptif" cols="50" rows="6"></textarea></td>
	</tr>
	<tr>
		<td align=center colspan=4><input type="button" class="bt" value="<< Validez votre trek >>"></td>
	</tr>
</table>
</form>

merci d'avance a+ gilles

17/05/2009, 01h14
emmanuel.remy
Salut,

Tes balises div sont intercalées entre les td ...
Code:

1 2 3 4 <div style="display:block" id="jour0"> <td align="center"> </td> <td align="center"> </td> </div>
. Reprends cet aspect HTML et tout rentrera dans l'ordre. ;)

ERE
17/05/2009, 06h23
gilles974

merci emmanuel.remy

mais j'avoue pas comprendre ta réponse

Citation:

Reprends cet aspect HTML et tout rentrera dans l'ordre

Quel aspect adopté ??

a+ gilles

Salut,

Tu ne peux pas avoir de balises DIV entre des balises TD; les balises TD se suivent. Dès que tu auras modifié ton code HTML tout devrait rentrer dans l'ordre.

Ramener ce code:

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
...
	<tr align=center>
		<td><b>Mot de passe</b><br><input type="password" name="pwd" size="8" maxlength="8"></td>
		<td><br>
		<select name="nbr_jour" onchange="nbrjour(this.value);">
		<option value="0">Nbr de jours</option>
		<option value="1">1 Journée</option>
		<option value="2">2 Jours ou +</option>
        </select>
      </td>	 
	  <div style="display:block" id="jour0">
		<td align="center">&nbsp;</td>
		<td align="center">&nbsp;</td>
	  </div>		  
	  <div style="display:none" id="jour1">
		<td align="center"><b>Du</b><br><input type="text" name="d" readonly size="10"><a href="#" onClick=" window.open('randopei/calendrier.php?frm=frm&ch=d','calendrier','width=350,height=160,scrollbars=0').focus();"><img src="randopei/petit_calendrier.gif" border="0"/></a></td>
		<td align="center">&nbsp;</td>
	  </div>		  
	  <div style="display:none" id="jour2">
		<td align="center"><b>Du</b><br><input type="text" name="d" readonly size="10"><a href="#" onClick=" window.open('randopei/calendrier.php?frm=frm&ch=d','calendrier','width=350,height=160,scrollbars=0').focus();"><img src="randopei/petit_calendrier.gif" border="0"/></a></td>
		<td align="center"><b>Au</b><br><input type="text" name="d1" readonly size="10"><a href="#" onClick=" window.open('randopei/calendrier.php?frm=frm&ch=d1','calendrier','width=350,height=160,scrollbars=0').focus();"><img src="randopei/petit_calendrier.gif" border="0"/></a></td>
	  </div>	
	</tr>
...

à une structure telle que:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
...
<tr>
   <td>...</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
</tr>
...

ERE

17/05/2009, 12h39
gilles974

ok bien compris merci