Discussion :

[lodan]

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

[sekaijin]

la réponse s'appelle tbody
il y a toujours un tbody quand il y a des ligne de donnée
Table
tBody
tr
td

A+JYT

[lodan]

[CODE]<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">

Merci pour ta réponse, mais j'ai déjà un tbody et je ne vois pas ce que cela change ?

[sekaijin]

tu ajoute un fils a table et non tbody

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById ('tableau').appendChild (ligne);

[lodan]

tu ajoute un fils a table et non tbody

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById ('tableau').appendChild (ligne);

Pas compris.
J'ai déjà cette ligne dans mon JS.

Si je place 'tableau' au niveau de <table>, le code sera avant mon entête et davant le <colgroup>

[sekaijin]

sorry j'avais pas vu que tableau c'était le tbody

alors là je vois pas
A+JYT

[lodan]

Merci d'avoir essayé. Je continue de creuser.

[lodan]

J'ai réussi comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
ligne = document.createElement('tr');
	ligne.style.background = "#CCCCFF";
	cell = document.createElement('td');
	texte = document.createTextNode(document.getElementById('date').value);
	cell.style.width = '80px';
	cell.appendChild (texte);
	ligne.appendChild(cell);
	cell = document.createElement('td');
	texte = document.createTextNode(document.getElementById('heure').value);
	cell.style.width = '60px';
	cell.appendChild (texte);
	ligne.appendChild(cell);

L'évolution sera de la faire avec une classe CSS