Sélectionner une plage de réservation horaire

Hello,

j'ai fait un planning avec des DIV (pas de table) : 4 colonnes (Jour 1, jour 2, jour 3 et jour 4) étant divisée en 2 (Salle 1, Salle 2).

30 lignes pour les horaires, 7H, 7H30, 8H ---- 22H.

Quand l'utilisateur click sur un creneau/jour/salle, la cellule change de couleur pour afficher la sélection. Ex : Si je veux reserver une salle de 8H à 10H, je sélectionne les 5 cellules 8>30, 8H30>9H, 9H > 9H30, 9H30>10H.

Au fur et a mesure des sélections, remplir un formulaire caché, heure de début et heure de fin, jour et salle.
je ne vois pas trop comment procéder pour alimenter les textbox au fur et a mesure des sélections.

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
 
<div class="dligneentete2">
            <div class="ColCreneau"></div><!--
         --><div class="ColPremierJour FormatLigneEntente FormatEnLigne">L 20</div><!--
         --><div class="ColDeuxiemeJour FormatLigneEntente FormatEnLigne">M 21</div><!--
         --><div class="ColTroisiemeJour FormatLigneEntente FormatEnLigne">M 22</div><!--
         --><div class="ColQuatriemeJour FormatLigneEntente FormatEnLigne">J 23</div>
        </div>
        <div class="dligneentete2">
            <div class="ColCreneau"></div><!--
         --><div class="FormatLigneEntente FormatEnLigne">
                <div class="FormatEnteteColSalle">101</div><!--
             --><div class="FormatEnteteColSalle FormatEnteteColD102">102</div>
            </div><!--
         --><div class="FormatLigneEntente FormatEnLigne">
                <div class="FormatEnteteColSalle">101</div><!--
             --><div class="FormatEnteteColSalle FormatEnteteColD102">102</div>
            </div><!--
         --><div class="FormatLigneEntente FormatEnLigne">
                <div class="FormatEnteteColSalle">101</div><!--
             --><div class="FormatEnteteColSalle FormatEnteteColD102">102</div>
            </div><!--
         --><div class="FormatLigneEntente FormatEnLigne">
                <div class="FormatEnteteColSalle">101</div><!--
             --><div class="FormatEnteteColSalle FormatEnteteColD102">102</div>
            </div>
        </div>
                <div class="LigneCreneau">
                   <div class="ColCreneau ColCreneauHeure">7H</div>
                   <div class="FormatEnLigne ColSallePremierJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatEnLigne ColSalleDeuxiemeJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatEnLigne ColSalleTroisiemeJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatEnLigne ColSalleQuatriemeJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
               </div>
                <div class="LigneCreneau">
                   <div class="ColCreneau ColCreneauHeure">30</div>
                   <div class="FormatEnLigne ColSallePremierJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatEnLigne ColSalleDeuxiemeJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatEnLigne ColSalleTroisiemeJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatEnLigne ColSalleQuatriemeJ">
                   <div class="FormatColSalle S101 CoulLibre" onclick="change(this)"></div>
                   <div class="FormatColSalle S102 CoulLibre" onclick="change(this)"></div>
               </div>

j'ai une idée mais pas sûr que ça fonctionne.

est-ce que je peux utiliser l'elément actif :

Code:

document.activeElement.className.search('S101') != -1

L'utilisateur a séletionné un horaire, un jour et une salle. Je dois ensuite parcourir les créneau en amont et en aval jusqu'au premier creneau vide amont et aval mais je ne vois pas comment faire.
Comment a partir de l'element actif remonter aux élements en amont et en aval sachant que les élements que je veux atteindre ne sont pas dans le même div ?

Help please :)

Merci

Bonjour,
pas bien l'esprit clair... mais je te suggères, une idée rapide comme cela, de mettre des checkbox masqués qu'il te serais plus facile de gérer.