Créer un tableau dynamique avec javascript ?

Version imprimable

Bonjour tout le monde =)

Alors voila, j'ai une petite question par rapport au développement dynamique.
Pour faire court, je dois rendre un projet à ma fac qui permet de créer un emploi du temps selon un fichier texte.
En respectant mon énoncé j'ai généré ceci pour chaque ligne de mon fichier texte
Code:

1 2 3 4 5 6 7 8 <div class="activite" id=act_0> <span class="type type_cours">Cours</span> <span class="theme theme_ASD">Algorithmes et Structures de Donnees</span> <span class="groupe groupe_0">0</span> <span class="jour">lundi</span> <span class="debut">15h15</span><span class="fin">16h45</span> <span class="lieu">M5 Bacchus</span> </div>
et j'arrive a faire un affichage classique en ligne qui donne cela :
Cours Algorithmes et Structures de Donnees 0lundi15h1516h45M5 Bacchus

Mais la deuxième partie du projet demande de créer un emploi du temps en 2D ressemblant en fait à ça : http://www.fil.univ-lille1.fr/~wegrz...t_S4_09-10.pdf

Et la je me suis donc dit que je devrais certainement me servir de JS pour "modifier mon code" et arriver à un truc se rapprochant d'un tableau.

Je ne demande pas de réponses mais si quelqu'un avait quelques indications pour que je commence parce que là... je suis comment dire, trop hésitant pour me lancer =)

Merci ;)

PS : J'ai posté dans le forum HTML puisque je ne sais pas trop quoi utiliser.

07/05/2010, 01h34
Vil'Coyote

perso en js je suis pas sur de pouvoir obtenir un rendu comme tu le souhaite cela serait plus avec php et les lib graphique comme jgraph ou gd

Tu peu faire ton emploi du temps vierge en donnant un id à chaque cellule représentant un jour et une heure
le tout en html tout simple.

Ensuite en utilisant javascript et DOM (voir FAQ) tu gères le remplissage des cellules...

Pour la lecture du fichier texte utilise php pour intégrer ton emploi du temps dans le script JS.

vite fait ça donne :
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 <$php //lecture du fichier //$lundi8h = "c'est cette ligne" ?> <table border="1"> <tr> <th>emploi du temps en 2D</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> </tr> <tr> <td>lundi</td> <td id"lundi8h"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>mardi</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script type="text/javascript"> var lundi8h = document.getElementById("lundi8h"); lundi8h.appendChild(document.createTextNode("<?php echo $lundi8h ?>")); </script>
reste à placer le code du script dans une fonction et à l'appeller genre dans la balise body évenement onload

bon ça m'as prit plus de temps que prévu bye^^

07/05/2010, 11h16
Amaurysme

Merci sioux, je pense que c'est ça que je vais faire puisque ça se rapproche de ce que j'ai vu en cours :lol:
Par contre, je ne vois pas comment faire quand ce sont des heures pas entières... Genre 13h30 - 15h00 8O

Edit :
En fait en ayant relu mon sujet, je me suis rendu compte qu'on ne me demande pas de tableau :

Citation:

1.3.2 Une journ ́ee
Les activit ́es pourront ˆetre regroup ́ees par journ ́ees au sein d’un ́el ́ement div appartenant aux classes jour et jour_nom du jour. Par exemple
<div class="jour jour_mardi"> .... </div>
1.3.3 Un emploi du temps
Les journ ́ees et les activit ́es d’un mˆeme emploi du temps sont regroup ́ees au sein d’un ́el ́ement div de classe edt. : <div class="edt"> ... </div>
1.4 Repr ́esentations `a l’ ́ecran
On pr ́evoiera deux types repr ́esentations `a l’ ́ecran.
Formations en Informatique de Lille – 2009/2010 : Projet – Technologies du Web 3
1.4.1 Repr ́esentation simple
Cette repr ́esentation est tr`es proche de la pr ́esentation par d ́efaut du HTML : chaque activit ́e apparaˆıt sur une ligne. Vous pouvez ́eventuellement pr ́evoir quelques am ́eliorations (polices, tailles, couleurs etc ...)
1.4.2 Repr ́esentation en 2 dimensions
Il s’agit d’obtenir une pr ́esentation reposant sur le mˆeme principe que ce que vous pouvez voir dans ce document : http://www.fil.univ-lille1.fr/~wegrz...t_S4_09-10.pdf Pour cette repr ́esentation on supposera que les activit ́es d’une mˆeme journ ́ee sont regroup ́ees dans une ́el ́ement div de classe jour comme indiqu ́e plus haut.
Une journ ́ee est pr ́esent ́ee horizontalement : l’axe horizontal repr ́esente les heures de la journ ́ee. Chaque journ ́ee est, de surcroit, divis ́ee en lignes : une par groupe. Une activit ́e est repr ́esent ́ee par un rectangle dont l’abcisse du bord gauche correspond `a l’heure de d ́ebut et celle du bord droit `a l’heure de fin. Une activit ́e qui concerne un groupe occupe uniquement la ligne de ce groupe. Une activit ́e qui concerne tout le monde (groupe 0) occupe toutes les lignes de la journ ́ee.
La premi`ere heure de l’emploi du temps est l’heure minimale de d ́ebut des activit ́es et la derni`ere heure est l’heure maximale de fin des activit ́es. Vous parviendrez `a cette repr ́esentation en choisissant pour tous les ́el ́ements de la classe activite le positionnnement absolu au sein du “div” qui repr ́esente la journ ́ee.
Pour d ́efinir la position de chaque activit ́e vous g ́en`ererez ensuite en PHP une r`egle sp ́ecifique `a chacune. Les valeurs des propri ́et ́es left right top bottom seront exprim ́ees en pourcen- tage, avec 2 chiffres pour la partie d ́ecimale. Par exemple (en supposant que l’emploi du temps est affich ́e entre 8h et 18h, du lundi au vendredi et qu’il y a 4 groupes) voici le positionnement au sein du mardi pour l’exemple d’activit ́e d ́ecrit plus haut (groupe 3, de 14h `a 15h30)

Donc, si j'ai bien compris, je dois me servir de JS pour créer ces fameuses journée en utilisant une fonction getValue.... ??