Switch d'affichage de tableaux d'extraction

**Wikefire** · 08/03/2018, 13h32

Bonjour à vous !

Bon voilà mon problème :

J'ai une page où j'affiche des tableaux résultant d'une extraction de BDD voici le code :

Code html :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<?php
 
 
$bdd = new PDO('mysql:host=localhost;dbname=direct nil;charset=utf8', 'root', '');
 
setlocale(LC_TIME, "fr_FR");
echo strftime("%k");
 
?>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Oui.css">
<div id="overlay" class="calque"></div>
<div id="window" class="window"><iframe class = "contemp_window" id = "contempwindow" name = "contempwindow"></iframe></div>
 
</head>
<body> 
 
<div id="GARE_0_tab" style="width:1000px;height: 470px; overflow: auto; border: 1px solid black;position:absolute;top:30px;visibility:hidden;">
	<table>
		<tbody id="liste" style="text-align:center;">
			<tr style="border-bottom: 1px solid black">
				<th>H</th>
				<th>REF</th>
				<th>QT</th>
				<th>GARE</th>
				<th>STATUT</th>
			</tr>
 
			<?php $req = $bdd->query("SELECT * FROM kanban2 WHERE NOT STATUT = 'TRAITE'");
                        $i=0;
                        while($donnees = $req->fetch()) { ?>
 
			<tr <?php echo "id='tr_$i'"?> >
				<td <?php echo "id='td_1_$i'"?> > <?php echo $donnees['H']; ?></td>
				<td <?php echo "id='td_2_$i'"?> > <?php echo $donnees['REF']; ?></td>
				<td <?php echo "id='td_3_$i'"?> > <?php echo $donnees['QT']; ?></td>
				<td <?php echo "id='td_4_$i'"?> > <?php echo $donnees['GARE']; ?></td>
				<td <?php echo "id='td_5_$i'"?> > <?php echo $donnees['STATUT']; ?></td>
				<?php echo "<td><input id='champ_$i' type='radio' name='blabla'>"; ?>
			</tr>
 
			<?php $i++; } $req->closeCursor();
                        unset($bdd);
                        ?> 
 
		</tbody>
	</table>
</div>
 
<div id="H1_tab" style="width:1000px;height: 470px; overflow: auto; border: 1px solid black;position:absolute;top:30px;visibility:hidden;">
	<table>
		<tbody id="liste" style="text-align:center;">
			<tr style="border-bottom: 1px solid black">
				<th>H</th>
				<th>REF</th>
				<th>QT</th>
				<th>GARE</th>
				<th>STATUT</th>
			</tr>
 
			<?php 
                        $bdd = new PDO('mysql:host=localhost;dbname=direct nil;charset=utf8', 'root', '');
                        $req = $bdd->query("SELECT * FROM kanban2 WHERE NOT STATUT = 'TRAITE'");
                        $i=0;
                        while($donnees = $req->fetch()) { ?>
 
			<tr <?php echo "id='tr_$i'"?> >
				<td <?php echo "id='td_1_$i'"?> > <?php echo $donnees['H']; ?></td>
				<td <?php echo "id='td_2_$i'"?> > <?php echo $donnees['REF']; ?></td>
				<td <?php echo "id='td_3_$i'"?> > <?php echo $donnees['QT']; ?></td>
				<td <?php echo "id='td_4_$i'"?> > <?php echo $donnees['GARE']; ?></td>
				<td <?php echo "id='td_5_$i'"?> > <?php echo $donnees['STATUT']; ?></td>
				<?php echo "<td><input id='champ_$i' type='radio' name='blabla'>"; ?>
			</tr>
 
			<?php $i++; } 
                        $req->closeCursor();
                        unset($bdd);
                        ?> 
 
		</tbody>
	</table>
</div>
</body>
</html>

Toutes mes tables sont identiques pour le moment (il s'agit d'une phase de test) seul l'id de la <div> change à chaque fois.

Le <style> avec position: absolute est voulu, je veux superposer tous ces tableaux et juste en afficher un selon (et cacher les autres) selon le contenu de la liste déroulante :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<SELECT class="liste_der" id="gare_dep" name="gare" size="1" onClick="test()">
			<OPTION selected>Choisir gare
			<OPTION>GARE 0
			<OPTION>G1
			<OPTION>H1
			<OPTION>J1
			<OPTION>J0
			<OPTION>H0
			<OPTION>J2
			</SELECT>

Pour gérer cela j'ai la fonction JS "test()" que voila :

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
function test(){
	var kjj = document.getElementById("gare_dep").value;
 
	if(kjj=='GARE 0'){
		document.getElementById("GARE_0_tab").style.visibility = "visible";
		document.getElementById("G1_tab").style.visibility = "hidden";
		document.getElementById("H1_tab").style.visibility = "hidden";
		document.getElementById("J1_tab").style.visibility = "hidden";
		document.getElementById("J0_tab").style.visibility = "hidden";
		document.getElementById("H0_tab").style.visibility = "hidden";
		document.getElementById("J2_tab").style.visibility = "hidden";
 
	}
	if(kjj=='H1'){
		document.getElementById("GARE_0_tab").style.visibility = "hidden";
		document.getElementById("G1_tab").style.visibility = "hidden";
		document.getElementById("H1_tab").style.visibility = "visible";
		document.getElementById("J1_tab").style.visibility = "hidden";
		document.getElementById("J0_tab").style.visibility = "hidden";
		document.getElementById("H0_tab").style.visibility = "hidden";
		document.getElementById("J2_tab").style.visibility = "hidden";
 
	}
}

J'ai réduit volontairement la fonction pour l'affichage, au début j'ai créé un switch mais celui-ci ne marchait pas alors j'ai essayé ça mais là non plus la fonction marche pas.

Je tiens à préciser que la fonction marche correctement pour le premier cas (le premier de la fonction comme si le reste était ignoré) quand la liste déroulante est sur "GARE 0" la table avec <id> "GARE_0_tab" s'affiche mais lorsque je mets la liste à H1 la table avec <id> "H1_tab" s'affiche pas (mais l'autre se "cache" bien).

Quelqu'un a-t-il une idée du problème ?

Merci d'avance.

**Watilin** · 09/03/2018, 15h51

Salut,

Tu peux construire les id en concaténant des chaînes.

Code :

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

1
2
3
4
5
6
7
8
9
document.getElementById("GARE_0_tab").style.visibility = "hidden";
document.getElementById("G1_tab").style.visibility = "hidden";
document.getElementById("H1_tab").style.visibility = "hidden";
document.getElementById("J1_tab").style.visibility = "hidden";
document.getElementById("J0_tab").style.visibility = "hidden";
document.getElementById("H0_tab").style.visibility = "hidden";
document.getElementById("J2_tab").style.visibility = "hidden";
 
document.getElementById(kjj + "_tab").style.visibility = "visible";

Pour rendre le code plus compact, tu peux utiliser un tableau :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var ids = [
  "GARE_0_tab",
  "G1_tab",
  "H1_tab",
  "J1_tab",
  "J0_tab",
  "H0_tab",
  "J2_tab"
];
 
for (let id of ids) {
  document.getElementById(id).style.visibility = "hidden";
}
document.getElementById(kjj + "_tab").style.visibility = "visible";

Switch d'affichage de tableaux d'extraction

JavaScript

Vue hybride

Discussions similaires

Partager

Partager