Switch d'affichage de tableaux d'extraction
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:
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:
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:
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. ;)
