montrer et cacher des div dynamiquement

Version imprimable

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:

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:

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.

Code:

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"; 
	}

Code:

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;"/>

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

Code:

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.

17/09/2008, 12h02
Bovino

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

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

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
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>

Code:

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...

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:

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>

Code:

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 !

17/09/2008, 15h49
kanabzh29

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