Insertion dynamique de lignes en colonne dans un tableau
Bonsoir,
Je réalise une saisie de lignes en ajax
J'ai un formulaire html pour la saisie de la ligne à ajouter, un javascript pour l'ajout de la ligne sur le formulaire et un script php pour la mise à jour dans la base de données.
Tout fonctionne bien, j'ai juste maintenant un problème de présentation
Mon formulaire est décomposé en 3 parties
1 - Entête des colonnes (comme un tableur) avec date, heure, contact et commentaire
2 - Le corps de mon formulaire alimenté par mon javascript avec les champs correspondants aux colonnes définis dans l'entête
3 - La ligne de saisie qui me permet de saisir pour alimenter le corps.
Je n'arrive pas à cadrer les 3 parties, les colonnes se décalent.
J'ai fini par mettre en tableau la partie 1, la partie 3. Pour la partie 2 je n'y arrive pas.
Un peu de code maintenant pour être plus clair.
Les parties 1, 2 et 3
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
| <div id="tableContainer" class="tableContainer">
<table width="100%" class="scrollTable">
<colgroup>
<col width="9%"/>
<col width="5%"/>
<col width="10%"/>
<col width="50%"/>
<col width="10%"/>
<col width="10%"/>
</colgroup>
<thead class="fixedHeader">
<tr align="left">
<td class="t_titre" >Date</td>
<td class="t_titre" >Heure</td>
<td class="t_titre" >Contact</td>
<td class="t_titre" >Texte</td>
<td class="t_titre" >Origine</td>
<td class="t_titre" >Action</td>
</tr>
</thead>
<tbody class="scrollContent" id="tableau">
</table>
</div>
</fieldset>
<table width="100%">
<colgroup>
<col width="9%">
<col width="5%">
<col width="10%">
<col width="50%">
<col width="10%">
<col width="10%">
</colgroup>
<tr>
</tr>
<tr>
<td>
<input type="button" name="Valider" onclick="ajouterLigne();" value="Valider" class="button">
</td>
</tr>
</table> |
J'avais essayé avec des div, puis je suis passé au tableau.
Mon problème est que le colgroup ne s'applique à mes lignes ajoutées.
Voici le javascript :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| ligne = document.createElement ('tr');
cell = document.createElement ('td');
texte = document.createTextNode (date);
cell.appendChild (texte);
ligne.appendChild(cell);
cell = document.createElement ('td');
texte = document.createTextNode (heure);
cell.appendChild (texte);
ligne.appendChild(cell);
cell = document.createElement ('td');
texte = document.createTextNode (contact);
cell.appendChild (texte);
ligne.appendChild(cell);
cell = document.createElement ('td');
texte = document.createTextNode (commentaire);
cell.appendChild (texte);
ligne.appendChild(cell);
ligne.appendChild(cell);
document.getElementById ('tableau').appendChild (ligne); |
Je pensais que mes lignes ajoutées puisqu'elles étaient en <td> prendraient les valeurs du colgroup.
Merci de m'éclairer sur le sujet.
Merci d'avance