montrer et cacher des div dynamiquement

**kanabzh29** · 17/09/2008, 11h27

Bonjour,

J'ai script qui permet de montrer et cacher un div, celui ci marche très bien, seulement j'aimerais faire en sorte qu'il affiche tel ou tel div en fonction d'une requete SQL.

voila le code JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript"> 
	<!--// [CDATA[ 
	function divaffiche(){ 
		document.getElementById("popup").style.display = "block"; 
		document.getElementById("cache").style.display = "inline"; 
		document.getElementById("voir").style.display = "none"; 
	} 
	function divcache(){ 
		document.getElementById("popup").style.display = "none"; 
		document.getElementById("cache").style.display = "none"; 
		document.getElementById("voir").style.display = "inline"; 
	} 
	// ]] -->
	</script>

voila le code php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$sql = sprintf("SELECT * FROM fic_opex_cla");
							$res = $dbh->query($sql);
							while($row = $res->fetch(PDO::FETCH_NUM)){
							echo '<input type="button" id="voir" value="afficher le code." onClick="divaffiche()" style="display:inline;"/>';
							echo '<input type="button" id="cache" value="cacher le code." onClick="divcache()" style="display:none;"/>'; 
							echo '<div id="popup" style="display:none;height:5em; width:900px;margin:auto;border:1px solid #000;"> ';
								for($i=1;$i<=19;$i++){
									echo $row[$i].'<br/>';
								}
							echo '</div> ';
							}

Pour l'instant le bouton affiche/cache que le div appelé popup, seulement il va y avoir plusieurs lignes de ma table appelées, et j'aimerais que chaque boutons affiche une ligne différente.

Si quelqu'un pouvait m'aider.

**Bovino** · 17/09/2008, 11h33

Code :

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

1
2
3
4
5
6
7
8
9
10
function divaffiche(id_element){ 
		document.getElementById(id_element).style.display = "block"; 
		document.getElementById("cache").style.display = "inline"; 
		document.getElementById("voir").style.display = "none"; 
	} 
	function divcache(id_element){ 
		document.getElementById(id_element).style.display = "none"; 
		document.getElementById("cache").style.display = "none"; 
		document.getElementById("voir").style.display = "inline"; 
	}

et

Code :

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

1
2
<input type="button" id="voir" value="afficher le code." onclick="divaffiche('popup')" style="display:inline;"/>
<input type="button" id="cache" value="cacher le code." onclick="divcache('popup')" style="display:none;"/>

**kanabzh29** · 17/09/2008, 11h38

J'ai modifié le code javascript comme tu l'a dit et modifié le code php comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$sql = sprintf("SELECT * FROM fic_opex_cla");
							$res = $dbh->query($sql);
							$j=0;
							while($row = $res->fetch(PDO::FETCH_NUM)){
							echo '<input type="button" id="voir" value="afficher le code." onClick="divaffiche("'.$j.'")" style="display:inline;"/>';
							echo '<input type="button" id="cache" value="cacher le code." onClick="divcache("'.$j.'")" style="display:none;"/>'; 
							echo '<div id="'.$j.'" style="display:none;height:5em; width:900px;margin:auto;border:1px solid #000;"> ';
								for($i=1;$i<=19;$i++){
									echo $row[$i].'<br/>';
								}
							$j++;
							echo '</div> ';
							}

mais cette fois il n'affiche plus rien, pourtant le div prend le "$j" à chaque passage.

**Bovino** · 17/09/2008, 12h02

On peut voir le js et le html généré ?
Evite aussi les id '0', '1', etc. mets plutôt 'elt0'... à la place.

**kanabzh29** · 17/09/2008, 12h53

Le html et js généré est le suivant :

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
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Opex V1.0</title>
	<link href="_css/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript"> 
	<!--// [CDATA[ 
	function divaffiche(){ 
		document.getElementById(id_element).style.display = "block"; 
		document.getElementById("cache").style.display = "inline"; 
		document.getElementById("voir").style.display = "none"; 
	} 
	function divcache(){ 
		document.getElementById(id_element).style.display = "none"; 
		document.getElementById("cache").style.display = "none"; 
		document.getElementById("voir").style.display = "inline"; 
	} 
	// ]] -->
	</script> 
  </head>
  <body>
  	<div id="global">
		<div id="menu">
			<div id="navigation">
			<ul><li><a href="index.php">Accueil</a></li><li><a href="form_opex.php">Ajouter une opex</a></li><li><a href="view_opex.php">Voir/modifier une opex</a></li></ul>			</div>
		</div>
		<div id="contenu">
			<img src="_img/titre.jpg"><br/><br/>
			<div class="statutConnect">
				> Utilisateur : anlecler :: <a href="logout.php">Logout</a>			</div>
			<div class="contain_opex">
				<div class="titreAddOpex">Clamart</div>
					<input type="button" id="voir" value="afficher le code." onClick="divaffiche("0")" style="display:inline;"/>
					<input type="button" id="cache" value="cacher le code." onClick="divcache("0")" style="display:none;"/>
					<div id="0" style="display:none;height:5em; width:900px;margin:auto;border:1px solid #000;"> 
					</div>
		</div>
	</div>
 
  </body>
</html>

**Bovino** · 17/09/2008, 13h05

Code :

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

1
2
3
4
5
6
7
8
9
10
function divaffiche(id_element){ 
		document.getElementById(id_element).style.display = "block"; 
		document.getElementById("cache").style.display = "inline"; 
		document.getElementById("voir").style.display = "none"; 
	} 
	function divcache(id_element){ 
		document.getElementById(id_element).style.display = "none"; 
		document.getElementById("cache").style.display = "none"; 
		document.getElementById("voir").style.display = "inline"; 
	}

Il faut déclarer les arguments de la fonction...

**kanabzh29** · 17/09/2008, 14h01

C'est vrai, la j'ai pas beaucoup réfléchi mais toujours le mème problème, ci dessous le code HTML et JS généré :

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
 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Opex V1.0</title>
	<link href="_css/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript"> 
	<!--// [CDATA[ 
	function divaffiche(id_element){ 
		document.getElementById(id_element).style.display = "block"; 
		document.getElementById("cache").style.display = "inline"; 
		document.getElementById("voir").style.display = "none"; 
	} 
	function divcache(id_element){ 
		document.getElementById(id_element).style.display = "none"; 
		document.getElementById("cache").style.display = "none"; 
		document.getElementById("voir").style.display = "inline"; 
	} 
	// ]] -->
	</script> 
  </head>
  <body>
  	<div id="global">
		<div id="menu">
			<div id="navigation">
			<ul><li><a href="index.php">Accueil</a></li><li><a href="form_opex.php">Ajouter une opex</a></li><li><a href="view_opex.php">Voir/modifier une opex</a></li></ul>			</div>
		</div>
		<div id="contenu">
			<img src="_img/titre.jpg"><br/><br/>
			<div class="statutConnect">
				> Utilisateur : anlecler :: <a href="logout.php">Logout</a>			</div>
			<div class="contain_opex">
				<div class="titreAddOpex">Clamart</div>
					<input type="button" id="voir" value="afficher le code." onClick="divaffiche("elt0")" style="display:inline;"/>
					<input type="button" id="cache" value="cacher le code." onClick="divcache("elt0")" style="display:none;"/>
					<div id="elt0" style="display:none;height:5em; width:900px;margin:auto;border:1px solid #000;">
					</div>
		</div>
	</div>
 
  </body>
</html>

**Bovino** · 17/09/2008, 14h05

Code :

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

1
2
3
<input type="button" id="voir" value="afficher le code." onClick="divaffiche('elt0')" style="display:inline;"/>
					<input type="button" id="cache" value="cacher le code." onClick="divcache('elt0')" style="display:none;"/>
					<div id="elt0" style=

Attention aux quotes !

**kanabzh29** · 17/09/2008, 15h49

C'est bon cela marche après résolution des problèmes de quote.
Merci pour l'aide

montrer et cacher des div dynamiquement

JavaScript

Discussions similaires

Partager

Partager