Cocher des cases dans un tableau , creé en php avec possibilité de les retenir et/ou enregistrer dans un bd
Contenu du snippet
pour un client il me fallait un grid de 98 cases heures/jours pour que les gens qui veulent suivre un cours puissent dire quand il sont disponibles
le script est fait en php/javascript
et à voir sur http://www.tennisclubduinbergen.be/manager/boeking.php
collect vous montre ce que vous pouvez mettre dans la BD
collect2 fait une copie du texte
apres changement du grid vous pouvez le restorer grace à restore
le script est fait en php/javascript
et à voir sur http://www.tennisclubduinbergen.be/manager/boeking.php
Source / Exemple :
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.nietgeboekt {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #FFFFFF;
background-color: #FF0000;
}
.geboekt {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000000;
background-color: #336600;
}
-->
</style>
<script type="text/javascript" language="javascript" defer>
onload = function(){
if(document.getElementById('result2').value.length=98){
restore();
}
var a=1, d, c, x, i =0, h=0, j=0;
var tab= document.getElementById('table1');
var tds = tab.getElementsByTagName('td');
var inp = tab.getElementsByTagName('input');
while (c = tds.item(i++)){
c.onclick = function() {
if (this.id.slice(0,1)=="t"){
a=1;
for(a;a<15;a++){
x=this.id.slice(1,2)+'-'+a;
var z='i'+this.id.slice(1,3)+'-'+a;
if(document.getElementById(x).className=='geboekt'){
document.getElementById(x).className='nietgeboekt';
document.getElementById(z).value='0';
}else{
document.getElementById(x).className='geboekt';
document.getElementById(z).value='1';
}
}
}
if (this.id.slice(0,3)=="uur"){
a=1;
for(a;a<8;a++){
x=a+'-'+this.id.slice(3,5);
var z='i'+a+'-'+this.id.slice(3,5);
if(document.getElementById(x).className=='geboekt'){
document.getElementById(x).className='nietgeboekt';
document.getElementById(z).value='0';
}else{
document.getElementById(x).className='geboekt';
//document.getElementById(z).className='geboekt';
document.getElementById(z).value='1';
}
//alert('z '+z+' z.value '+document.getElementById(z).value)
}
}
if(this.id.slice(0,1)>0) {
var z='i'+this.id;
if (this.className=='nietgeboekt')
{
this.className='geboekt';
document.getElementById(z).value='1';
}else{
this.className='nietgeboekt';
document.getElementById(z).value='0';
}
}
}
}
}
function collect(){
var f=document.getElementById("result");
f.value='';
var tab = document.getElementById('table1');
var inp2;
var e, i=1,j=1;zz ="";
for (i;i<8;i++){
for (j;j<15;j++){
e=document.getElementById('i'+i+'-'+j)
zz=zz+e.value;
}
j=1;
}
f.value=zz;
}
function collect2(){
document.getElementById("result2").value=document.getElementById("result").value;
}
function restore(){
var f=document.getElementById("result2");
var n,e,m=0, i=1,j=1;zz ="";
for (i;i<8;i++){
for (j;j<15;j++){
e=document.getElementById('i'+i+'-'+j)
//alert(e.id);
//alert('m='+m+' charat '+f.value.charAt(m));
e.value=f.value.charAt(m);
//alert('f.value is '+f.value.charAt(m)+' m is ='+m)
if (f.value.charAt(m)==0){
document.getElementById(i+'-'+j).className='nietgeboekt';
}else{
document.getElementById(i+'-'+j).className='geboekt';
}
m=m+1;
}
j=1;
}
m=0;
}
</script>
</head>
<body>
<?php
echo '<table id="head" border="1">';
echo '<tr><td colspan="7"> Door op de dagen/uren te klikken verandert de kleur : groen is beschikbaar, rood is onbeschikbaar</td></tr>';
echo '<tr><td> Door op een hokje te klikken kunt u individuele vakjes beschikbaar/onbeschikbaar maken</td><td></td></tr>';
echo '</table>';
echo '<table border="0" id="table1">';
echo '<tr><td id="alles"></td><td id="t1">maandag</td><td id="t2">dinsdag</td><td id="t3">woensdag</td><td id="t4">donderdag</td><td id="t5">vrijdag</td><td id="t6">zaterdag</td><td id="t7">zondag</td></tr>';
echo '<tr><td id="uur1" >8-9</td> <td class="nietgeboekt" id="1-1"><input type="hidden" id="i1-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-1"><input type="hidden" id="i2-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-1"><input type="hidden" id="i3-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-1"><input type="hidden" id="i4-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-1"><input type="hidden" id="i5-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-1"><input type="hidden" id="i6-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-1"><input type="hidden" id="i7-1" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur2">9-10</td> <td class="nietgeboekt" id="1-2"><input type="hidden" id="i1-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-2"><input type="hidden" id="i2-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-2"><input type="hidden" id="i3-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-2"><input type="hidden" id="i4-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-2"><input type="hidden" id="i5-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-2"><input type="hidden" id="i6-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-2"><input type="hidden" id="i7-2" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur3">10-11</td><td class="nietgeboekt" id="1-3"><input type="hidden" id="i1-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-3"><input type="hidden" id="i2-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-3"><input type="hidden" id="i3-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-3"><input type="hidden" id="i4-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-3"><input type="hidden" id="i5-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-3"><input type="hidden" id="i6-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-3"><input type="hidden" id="i7-3" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur4">11-12</td><td class="nietgeboekt" id="1-4"><input type="hidden" id="i1-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-4"><input type="hidden" id="i2-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-4"><input type="hidden" id="i3-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-4"><input type="hidden" id="i4-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-4"><input type="hidden" id="i5-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-4"><input type="hidden" id="i6-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-4"><input type="hidden" id="i7-4" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur5">12-13</td><td class="nietgeboekt" id="1-5"><input type="hidden" id="i1-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-5"><input type="hidden" id="i2-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-5"><input type="hidden" id="i3-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-5"><input type="hidden" id="i4-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-5"><input type="hidden" id="i5-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-5"><input type="hidden" id="i6-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-5"><input type="hidden" id="i7-5" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur6">13-14</td><td class="nietgeboekt" id="1-6"><input type="hidden" id="i1-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-6"><input type="hidden" id="i2-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-6"><input type="hidden" id="i3-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-6"><input type="hidden" id="i4-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-6"><input type="hidden" id="i5-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-6"><input type="hidden" id="i6-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-6"><input type="hidden" id="i7-6" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur7">14-15</td><td class="nietgeboekt" id="1-7"><input type="hidden" id="i1-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-7"><input type="hidden" id="i2-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-7"><input type="hidden" id="i3-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-7"><input type="hidden" id="i4-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-7"><input type="hidden" id="i5-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-7"><input type="hidden" id="i6-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-7"><input type="hidden" id="i7-7" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur8">15-16</td><td class="nietgeboekt" id="1-8"><input type="hidden" id="i1-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-8"><input type="hidden" id="i2-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-8"><input type="hidden" id="i3-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-8"><input type="hidden" id="i4-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-8"><input type="hidden" id="i5-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-8"><input type="hidden" id="i6-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-8"><input type="hidden" id="i7-8" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur9">16-17</td><td class="nietgeboekt" id="1-9"><input type="hidden" id="i1-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-9"><input type="hidden" id="i2-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-9"><input type="hidden" id="i3-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-9"><input type="hidden" id="i4-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-9"><input type="hidden" id="i5-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-9"><input type="hidden" id="i6-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-9"><input type="hidden" id="i7-9" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur10">17-18</td><td class="nietgeboekt" id="1-10"><input type="hidden" id="i1-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-10"><input type="hidden" id="i2-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-10"><input type="hidden" id="i3-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-10"><input type="hidden" id="i4-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-10"><input type="hidden" id="i5-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-10"><input type="hidden" id="i6-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-10"><input type="hidden" id="i7-10" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur11">18-19</td><td class="nietgeboekt" id="1-11"><input type="hidden" id="i1-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-11"><input type="hidden" id="i2-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-11"><input type="hidden" id="i3-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-11"><input type="hidden" id="i4-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-11"><input type="hidden" id="i5-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-11"><input type="hidden" id="i6-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-11"><input type="hidden" id="i7-11" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur12">19-20</td><td class="nietgeboekt" id="1-12"><input type="hidden" id="i1-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-12"><input type="hidden" id="i2-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-12"><input type="hidden" id="i3-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-12"><input type="hidden" id="i4-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-12"><input type="hidden" id="i5-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-12"><input type="hidden" id="i6-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-12"><input type="hidden" id="i7-12" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur13">30-21</td><td class="nietgeboekt" id="1-13"><input type="hidden" id="i1-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-13"><input type="hidden" id="i2-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-13"><input type="hidden" id="i3-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-13"><input type="hidden" id="i4-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-13"><input type="hidden" id="i5-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-13"><input type="hidden" id="i6-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-13"><input type="hidden" id="i7-13" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur14">21-22</td><td class="nietgeboekt" id="1-14"><input type="hidden" id="i1-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-14"><input type="hidden" id="i2-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-14"><input type="hidden" id="i3-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-14"><input type="hidden" id="i4-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-14"><input type="hidden" id="i5-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-14"><input type="hidden" id="i6-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-14"><input type="hidden" id="i7-14" value="0" readonly="true" size="10"></td></tr>';
echo '</table>';
?>
<input name="collect" type="button" value="collect" onclick="collect()">
<input id="result" type="text" size="120">
<input name="collect2" value="collect2" type="button" onclick="collect2()">
<input id="result2" type="text" value="00000000000000111111111111110000000000000000000000000000000000000000000000000000000000000000000000" size="110">
<input name="collect2" value="restore" type="button" onclick="restore()">
</body>
</html>
Conclusion :
collect vous montre ce que vous pouvez mettre dans la BD
collect2 fait une copie du texte
apres changement du grid vous pouvez le restorer grace à restore
A voir également
- Cocher des cases dans un tableau , creé en php avec possibilité de les retenir et/ou enregistrer dans un bd
- Afficher un tableau php en html - Conseils pratiques -PHP
- Afficher un tableau php - Forum PHP
- Taille d'un tableau php ✓ - Forum PHP
- Tableau de turbo 2 - Forum C / C++ / C++.NET
- Créer un logo avec photoshop ✓ - Forum Graphisme/design
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.