Rooster planning
Het is al een jaar of 6 dat ik niet meer actief ben geweest op PHPhulp (voor het laatst toen de layout nog niet geupdate was)
Na zelf een drukke tijd te hebben gehad eindelijk weer alle tijd voor het maken van website's etc, helaas zitten daar wat opstart probleempjes bij..
Ik ben bezig voor m'n werk om een mooie rooster planning op te zetten, hiervoor wil ik verschillende kleurtjes gebruiken. Hier een voorbeeld:
V = " Vroege Dienst:
M = "Middag dienst"
L = "Late dienst"
Z = "Ziek"
etc, etc...
Nu wil ik dat het blokje (input veld) gelijk mee-kleurt met de ingevoerde letter, een basis aanleggen is me gelukt, Maar helaas ben ik nog niet zover gekomen dat ik het op meerdere input velden kan gebruiken (wat mooi zou zijn als ik de form naam kan selecteren en dat hij elke input apart bekijkt)
Nu over de pagina die ik al heb, hij haalt alle namen van medewerkers uit de Database en plaatst deze onder elkaar, in de velden ernaast (nog een ouderwetse HTML tabel) plaatst hij de input veldjes (5 stuks van ma t/m vr) elk veld moet hierbij worden gekleurd bij de letter. ik weet dus nooit hoeveel velden het zijn, aangezien er ook medewerkers bij kunnen komen.. Om dan elke keer hele lappen code toe te voegen of te verwijderen lijkt me overbodig, kan dit makkelijker? :-)
met 1 input werkt het al:
http://jsfiddle.net/LXQxy/503/
En alle velden (1 rij is groen door de mouse-over)
Al na veel pogingen niet verder gekomen, als iemand mij wil of kan helpen; graag!
Knuff,
Mèlissa
In het geval van de screenshot is het "een nieuwe week" (die nog geen informatie bevat) oftwel er staat nog niets ingevuld :-)
Geef eens het stukje code waarmee je zo'n week print.
Quote:
<td width="400px" ><b>Persoon</b></td>
<td width="80px" ><b>MA</b></td>
<td width="80px" ><b>DI</b></td>
<td width="80px" ><b>WO</b></td>
<td width="80px" ><b>DO</b></td>
<td width="80px" ><b>VR</b></td>
</tr>
</table>
<td width="80px" ><b>MA</b></td>
<td width="80px" ><b>DI</b></td>
<td width="80px" ><b>WO</b></td>
<td width="80px" ><b>DO</b></td>
<td width="80px" ><b>VR</b></td>
</tr>
Code (php)
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
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
<?php
$query = "SELECT * FROM `personeel` ORDER BY naam";
$resultaat = mysql_query($query) or die(mysql_error());
$aantal = mysql_num_rows($resultaat);
if($aantal >= 1)
{
while($rij = mysql_fetch_array($resultaat))
{
$naam= $rij['naam'];
$voornaam = $rij['voornaam'];
$personeelsnummer= $rij['personeelsnummer'];
echo '
<tr>
<td>'.$naam.','.$voornaam.' ('.$personeelsnummer.')</td>
<td ><input type="text" id="'.$voornaam.'-ma" class="rooster" maxlength="1" name="'.$voornaam.'-ma"></td>
<td ><input type="text" id="'.$voornaam.'-di" class="rooster" maxlength="1" name="'.$voornaam.'-di"></td>
<td ><input type="text" id="'.$voornaam.'-wo" class="rooster" maxlength="1" name="'.$voornaam.'-wo"></td>
<td ><input type="text" id="'.$voornaam.'-do" class="rooster" maxlength="1" name="'.$voornaam.'-do"></td>
<td ><input type="text" id="'.$voornaam.'-vr" class="rooster" maxlength="1" name="'.$voornaam.'-vr"></td>
</tr>
';
}
}
?>
$query = "SELECT * FROM `personeel` ORDER BY naam";
$resultaat = mysql_query($query) or die(mysql_error());
$aantal = mysql_num_rows($resultaat);
if($aantal >= 1)
{
while($rij = mysql_fetch_array($resultaat))
{
$naam= $rij['naam'];
$voornaam = $rij['voornaam'];
$personeelsnummer= $rij['personeelsnummer'];
echo '
<tr>
<td>'.$naam.','.$voornaam.' ('.$personeelsnummer.')</td>
<td ><input type="text" id="'.$voornaam.'-ma" class="rooster" maxlength="1" name="'.$voornaam.'-ma"></td>
<td ><input type="text" id="'.$voornaam.'-di" class="rooster" maxlength="1" name="'.$voornaam.'-di"></td>
<td ><input type="text" id="'.$voornaam.'-wo" class="rooster" maxlength="1" name="'.$voornaam.'-wo"></td>
<td ><input type="text" id="'.$voornaam.'-do" class="rooster" maxlength="1" name="'.$voornaam.'-do"></td>
<td ><input type="text" id="'.$voornaam.'-vr" class="rooster" maxlength="1" name="'.$voornaam.'-vr"></td>
</tr>
';
}
}
?>
</table>
Kijkt u eens :)
Toevoeging op 12/11/2014 20:26:40:
(Mijn excuus, hij zet het zelf over naar code.. ik had het in een quote geplaatst)
Gewijzigd op 12/11/2014 20:37:44 door Melissa van der Elst
HTML id attribuut moet uniek zijn per pagina
HTML class attribuut mag zo vaak toegepast worden als je maar wilt:
zo is het dus goed:
Code (php)
1
<input type="text" value="" class="roosterinput" maglength="1" />
En dan de kracht van JQuery:
Code (php)
1
$(".roosterinput").keyup(function() { ... }); // let op de . ipv #
en de keyup event wordt aan alle elementen (input's) met de class="roosterinput" gehangen!
Gewijzigd op 12/11/2014 21:00:25 door Frank Nietbelangrijk
Ook de name="..." moet uniek zijn en dat is bij jou niet zo.
Als er twee mensen zijn met dezelfde voornaam dan werkt het niet meer.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$query = "SELECT * FROM `personeel` ORDER BY naam";
$resultaat = mysql_query($query) or die(mysql_error());
$aantal = mysql_num_rows($resultaat);
if($aantal >= 1)
{
while($rij = mysql_fetch_array($resultaat))
{
$naam= $rij['naam'];
$voornaam = $rij['voornaam'];
$personeelsnummer= $rij['personeelsnummer'];
echo '<tr><td>'.$naam.','.$voornaam.' ('.$personeelsnummer.')</td>';
foreach(array('ma','di','wo','do','vr') as $dag)
{
echo '<td ><input type="text" onkeyup="inkleuren(\''.$dag.$personeelsnummer.'\');" id="'.$dag.$personeelsnummer.'" class="rooster" maxlength="1" name="'.$dag.$personeelsnummer.'"></td>';
}
echo '</tr>';
}
}
?>
$query = "SELECT * FROM `personeel` ORDER BY naam";
$resultaat = mysql_query($query) or die(mysql_error());
$aantal = mysql_num_rows($resultaat);
if($aantal >= 1)
{
while($rij = mysql_fetch_array($resultaat))
{
$naam= $rij['naam'];
$voornaam = $rij['voornaam'];
$personeelsnummer= $rij['personeelsnummer'];
echo '<tr><td>'.$naam.','.$voornaam.' ('.$personeelsnummer.')</td>';
foreach(array('ma','di','wo','do','vr') as $dag)
{
echo '<td ><input type="text" onkeyup="inkleuren(\''.$dag.$personeelsnummer.'\');" id="'.$dag.$personeelsnummer.'" class="rooster" maxlength="1" name="'.$dag.$personeelsnummer.'"></td>';
}
echo '</tr>';
}
}
?>
De name="..." is bestaat nu uit twee letters van de dag en daarachter het personeelsnummer want die is uniek.
Verder moet er vooraf een klein Javascriptje komen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function inkleuren(id)
{
switch(document.getElementById(id).value)
{
case 'l' : document.getElementById(id).style.backgroundColor = 'red';
break;
case 'v' : document.getElementById(id).style.backgroundColor = 'blue';
break;
case 'z' : document.getElementById(id).style.backgroundColor = 'yellow';
break;
}
}
</script>
function inkleuren(id)
{
switch(document.getElementById(id).value)
{
case 'l' : document.getElementById(id).style.backgroundColor = 'red';
break;
case 'v' : document.getElementById(id).style.backgroundColor = 'blue';
break;
case 'z' : document.getElementById(id).style.backgroundColor = 'yellow';
break;
}
}
</script>
Het Javascript kan je uiteraard zelf aanvullen met nog andere letters/kleuren.
Getest en hier werkt het perfect.
Gewijzigd op 12/11/2014 21:39:02 door - SanThe -
Toevoeging op 12/11/2014 22:00:35:
Echt heel erg bedankt -SanThe-, de basis werkt zeker goed, en nu werken ook meerdere velden :-)
Helaas werkt het nog maar op 1 rij, heeft u enig idee hoe dit zo gekomen is?
Laat je (relevante) code eens zien.
Gewijzigd op 12/11/2014 22:07:46 door - SanThe -
function inkleuren(id)
{
switch(document.getElementById(id).value)
{
case 'l' : document.getElementById(id).style.backgroundColor = 'red';
break;
case 'v' : document.getElementById(id).style.backgroundColor = 'blue';
break;
case 'z' : document.getElementById(id).style.backgroundColor = 'yellow';
break;
}
}
</script>
<h2><a href="#tab1">Rooster planning</a></h2>
<h1>Rooster - Week: <input type="text" id="Weeknummer" class="roosterweek" maxlength="2" name="Weeknummer"> </h1>
<table id="table_box" class="maintb">
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$query = "SELECT * FROM `personeel` ORDER BY naam";
$resultaat = mysql_query($query) or die(mysql_error());
$aantal = mysql_num_rows($resultaat);
if($aantal >= 1)
{
while($rij = mysql_fetch_array($resultaat))
{
$naam= $rij['naam'];
$voornaam = $rij['voornaam'];
$personeelsnummer= $rij['personeelsnummer'];
echo '<tr><td>'.$naam.','.$voornaam.' ('.$personeelsnummer.')</td>';
foreach(array('ma','di','wo','do','vr') as $dag)
{
echo '<td ><input type="text" onkeyup="inkleuren(\''.$dag.$personeelsnummer.'\');" id="'.$dag.$personeelsnummer.'" class="rooster" maxlength="1" name="'.$dag.$personeelsnummer.'"></td>';
}
echo '</tr>';
}
}
?>
$query = "SELECT * FROM `personeel` ORDER BY naam";
$resultaat = mysql_query($query) or die(mysql_error());
$aantal = mysql_num_rows($resultaat);
if($aantal >= 1)
{
while($rij = mysql_fetch_array($resultaat))
{
$naam= $rij['naam'];
$voornaam = $rij['voornaam'];
$personeelsnummer= $rij['personeelsnummer'];
echo '<tr><td>'.$naam.','.$voornaam.' ('.$personeelsnummer.')</td>';
foreach(array('ma','di','wo','do','vr') as $dag)
{
echo '<td ><input type="text" onkeyup="inkleuren(\''.$dag.$personeelsnummer.'\');" id="'.$dag.$personeelsnummer.'" class="rooster" maxlength="1" name="'.$dag.$personeelsnummer.'"></td>';
}
echo '</tr>';
}
}
?>
</table>
Toevoeging op 12/11/2014 22:13:45:
Het is gelukt! Had een stukje niet aangepast :-)
Echt heeeel erg bedankt!
Laat de broncode van de pagina eens zien. Alleen van de inputvelden.
Gewijzigd op 12/11/2014 22:14:52 door - SanThe -
Ik had zelf een stukje code niet verwijderd waardoor hij niet goed liep. Nu loopt hij echter meer dan goed!
Veel succes verder.
En we zien je weer als je ergens niet uit komt.