tableau checkbox jquery
Bonjour,
Voila j'ai besoin de votre aide, je souhaiterai faire un tableau comme ceci :
ou chaque case est une checkbox et si elle est a 1 dans ma bdd je voudrais quelle soit coché, et si possible sans rafraichire la page.
je voudrais de l'aide pour savoir comment je doit démarrer mon code et vérifier dans ma bdd si t'elle case est coché ou non ?
j'ai commencé à faire mon tableau comme ceci, est il possible de le faire avec jquery ?
<table class:"cadre-horaire" style=" margin-bottom: 40px;">
<tr class="1">
<th></th>
<th>lundi</th>
<th>mardi</th>
<th>mercredi</th>
<th>jeudi</th>
<th>vendredi</th>
<th>samedi</th>
<th>dimanche</th>
</tr>
<tr class="cocher">
<th>Matin</th>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1021"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1007"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1013"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1014"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1015"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1016"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1017"></label>
</td>
</tr>
<tr class="cocher">
<th>Apres-Midi</th>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1021"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1007"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1013"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1014"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1015"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1016"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1017"></label>
</td>
</tr>
<tr class="cocher">
<th>Soir</th>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1021"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1007"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1013"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1014"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1015"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1016"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1017"></label>
</td>
</tr>
<tr class="cocher">
<th>Nuit</th>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1021"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1007"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1013"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1014"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1015"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1016"></label>
</td>
<td align="center">
<input type="checkbox" id="" value="" class="">
<label class="bleu" for="inputOption_1_1017"></label>
</td>
</tr>
</table>merci pour votre aide
3 réponses
Bonsoir,
Comme te l'a dit Lartak, si chacune de tes cases sont enregistré en base de données il te suffit de tester l'état avec une condition soit côté PHP si tu n'utilise que ça, soit avec du javascript si tu utilise une requête Ajax.
En imaginant que tu n'uitlise que du PHP, il te suffit en fonction de l'état de changer le style (donc tu peux faire ça directement avec l'attribut style ou avec une class / un ID CSS.
En imaginant que tu utilises une requête ajax, il te suffira de récupérer l'état de la checkbox, cette méthode me parait un peu plus compliqué vu que tu devras trouver checkbox devra être changé, tu pourrais par exemple utiliser l'atribut "data-id" pour y mettre l'id de la checkbox récupéré depuis la base de données.
Cette méthode est, je trouve bien plus compliqué à mettre en place pour au final juste bénéficier de l'asynchrone (surtout que si j'ai bien compris ce n'est pas quelque chose de si important pour toi, tout ce que tu cherches c'est juste à persister l'état de tes checkbox..)
Dans le cas où tu n'utilise que le PHP
<?php
// L'état de la checkbox récupéré depuis la bdd se trouve dans une variable
if($checked){
// Dans le cas où la valeur est "vrai" (true) (donc qu'elle est égal à 1) la case est coché
echo "<input type='checkbox' style='background-color='green'>"; // Ou sinon tu peux également mettre une class ou un id.
} else if(!$checked) {
// Dans le cas où la valeur est "faux" (false) (donc qu'elle n'est pas égal à 1) la case n'est pas coché
echo "<input type='checkbox' style='background-color='white'>";
}
?>
Bonjour.
vérifier dans ma bdd si t'elle case est coché ou non
Il te suffit de récupérer les données concernées dans la base de données, si tu as bien les données en BDD tu ne devrais pas avoir de problème à les récupérer.
merci a vous.
j'y suis arrivé fin d'aprem comme je voulais avec jquery .
j'ai pu afficher mon tableau et modifier chaque case .