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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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