Discussion :

[stof]

Bonjour,

J'ai un tableau avec une colonne gauche id="colonneGauche" et une colonne droite id="colonneDroite"
Dans cette colonne droite, j'ai plusieurs lignes dont une qui s'affiche sous conditions (en fonction de checkbox cochées par ailleurs) --> id="maLigne"

Quand on coche une case, je positionne donc selon les cas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('colonneGauche').style.visibility = 'hidden' ou 'visible'
document.getElementById('colonneDroite').style.visibility = 'hidden' ou 'visible'
document.getElementById('maLigne').style.visibility = 'hidden' ou 'visible'

Problème1 : FireFox : les colonneGauche et colonneDroite disparaissent instantanément comme je veux mais sous IE, il faut cliquer quelque part dans l'écran pour que le rafraichissement se fasse (!!)

Problème2 :IE ou Firefox, la ligne disparaît en me laissant un vide, alors que j'aurais bien voulu que le tableau s'arrange pour se réorganiser automatiquement sans cet espace vide.

Merci pour vos suggestions.

[SpaceFrog]

sans voir le html associé, ça relève plus de la divination que de javascript

[stof]

Je ne sais pas s'il y a vraiment besoin de tout le pâté de code pour comprendre de quoi il s'agit mais soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<table class="boxEmpty texteGrisFonce titre4" cellspacing="0" > 
	<tr>
		<%-- Colonne Gauche --%>
		<td style="margin:0; padding:0;" id="colonneGauche" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Gauche</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			    <tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
	  		</table>
  		</td>
 
		<%-- Colonne Droite --%>
		<td style="margin:0; padding:0;" id="colonneDroite" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Droite</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			   	<tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
	    		<%// Afficher que sous certaines conditions%>
		    	<tr id="maLigne">
	      			<td>Col4.1</td>
					<td>Col4.2</td>
	    		</tr>
				<tr>
			      <td>Col5.1</td>
			      <td>Col5.2</td>
	    		</tr>
	  		</table>
  		</td>	
	</tr>
</table>

Et la fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	function dispOrHideGaucheDroite(){
		//Je fais mes conditions pour déterminer nbgauche et nbDroite
 
		if (nbDroite == 0){
			document.getElementById('colonneDroite').style.visibility = 'hidden';
		}else{
			document.getElementById('colonneDroite').style.visibility = 'visible';
		}
 
		if (nbgauche == 0){
			document.getElementById('colonneGauche').style.visibility = 'hidden'; 
			if (nbDroite > 0){
				document.getElementById('maLigne').style.visibility = 'visible'; 
			}else{
				document.getElementById('maLigne').style.visibility = 'hidden'; 
			}	
		}else{
			document.getElementById('colonneGauche').style.visibility = 'visible'; 
			document.getElementById('maLigne').style.visibility = 'hidden';
		}
	}

[Bovino]

La première des choses à comprendre et qui répondra à ta seconde question (qui n'est pas un problème à proprement parler), c'est la différence entre display et visibility.

Si display permet d'ajuster un conteneur à la façon dont il doit être affiché et en particulier, lui supprimer les dimensions s'il vaut none, visibility sert juste à déterminer si l'élément est visible ou non et dans tous les cas, l'espace qui lui est dédié sera conservé.

[stof]

différence entre display et visibility (..)

Si je remplace les
style.visibility = 'hidden' par style.display = 'none'
et les
style.visibility = 'visible' par style.display = 'block'
cela n'a aucun effet (c'est donc moins bien que les disparitions via la méthode style.display)

[Bovino]

cela n'a aucun effet

Peut-être parce que tu t'y prends mal

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
    <head>
		<title>display / visibility</title>
        <meta charset="utf-8" />
		<script>
			var visibleDisplay = true;
			var visibleVisibility = true;
			function alternGauche(){
				document.getElementById('colonneGauche').style.display = visibleDisplay ? 'none' : '';
				visibleDisplay=!visibleDisplay;
			}
			function altern(){
				document.getElementById('colonneGauche').style.visibility = visibleVisibility ? 'hidden' : 'visible';
				visibleVisibility=!visibleVisibility;
			}
		</script>	
    </head>
    <body>
		<p><button onclick="alternGauche()">Méthode display</button><button onclick="altern()">Méthode visibility</button></p>
		<table class="boxEmpty texteGrisFonce titre4" cellspacing="0" > 
	<tr>
		<td style="margin:0; padding:0;" id="colonneGauche" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Gauche</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			    <tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
	  		</table>
  		</td>
		<td style="margin:0; padding:0;" id="colonneDroite" valign="top">
			<table class="boxClear texteGrisFonce titre4" cellspacing="0"> 
				<tr><th class="texteBlanc titre3" >Colonne Droite</th></tr>
			</table>
		  	<table class="boxGrid texteGrisFonce titre3" cellspacing="0" style="width:435px;"> 
			   	<tr>
			      <td>Col1.1</td>
			      <td>Col1.2</td>
			    </tr>    	    
		    	<tr>
			      <td>Col2.1</td>
			      <td>Col2.2</td>
	    		</tr>
		    	<tr>
			      <td>Col3.1</td>
			      <td>Col3.2</td>
	    		</tr>
		    	<tr id="maLigne">
	      			<td>Col4.1</td>
					<td>Col4.2</td>
	    		</tr>
				<tr>
			      <td>Col5.1</td>
			      <td>Col5.2</td>
	    		</tr>
	  		</table>
  		</td>	
	</tr>
</table>
	</body>
</html>