Cocher des cases dans un tableau , creé en php avec possibilité de les retenir et/ou enregistrer dans un bd

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 569 fois - Téléchargée 25 fois

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

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

Ajouter un commentaire

Commentaires

vandenplasfrederic
Messages postés
6
Date d'inscription
vendredi 11 novembre 2005
Statut
Membre
Dernière intervention
21 août 2006
-
en plus <input ... il y a 98 variables dans le tableau
vandenplasfrederic
Messages postés
6
Date d'inscription
vendredi 11 novembre 2005
Statut
Membre
Dernière intervention
21 août 2006
-
ok le 30 doit etre 20, merci de me le dire
purqoui en php, parce que j'écris tout en php:)
et que le même grid est employé ulterieurement pur faire un autre grid qui montre pour tout les personnes qui se sont inscrit pour un evenement sont montré dans la case de sorte à ce que la personne à qui est destiné les données puisse décider quand elle donnera les cours.
une boucle pour le html compliquerai le code mais pourait etre possible. chaque champ doit avoir un id unique et formé de la façon dont il est formé
cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27 -
quand on élimine les echo (inutiles)
et quelques broutilles ici et là,
finalement, c'est pas si mal.
et ça peut servir.
il est vrai qu'une petite boucle au lieu
des ces nombreuses lignes...
sympa, la langue, j'aime.
le niveau "initié" est, par contre,
assez mal venu...
cs_jeca
Messages postés
341
Date d'inscription
mercredi 17 juillet 2002
Statut
Membre
Dernière intervention
14 juillet 2011
11 -
Bonjour,

Bizarre cette tranche horaire : 30-21.
Ceci n'est pas correct : readonly="true". En html, c'est readonly tout court, et en xhtml, c'est readonly="readonly".
Enfin, pourquoi utiliser php pour l'affichage du tableau alors que celui-ci ne contient aucune variable ?

@+

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.