tableau éditable + base de donnée

Version imprimable

07/05/2009, 18h07
munos46

tableau éditable + base de donnée

Bonjour,
je travaille actuellement sur un application comptable.
Je dois construire un tableau qui soit initialisé avec des valeurs d'une base de donnée, il faut également que ce tableau soit modifiable et éditable dans le sens où l'utilisateur pourra ajouter ou supprimer une ligne de se tableau. A la fin de la saisie le tableau sera enregistré dans une base de donnée. On m'a conseillé d'utiliser pour cela le java script.
Je m'y connais peu dans ce domaine c'est pourquoi je sollicite votre aide.
Si vous souhaitez plus d'information sur le sujet, demandez.
07/05/2009, 18h13
emmanuel.remy

Salut,

A partir du moment où tu souhaites modifier ta page HTML avec de l'intéractivité, la (quasi) seule réalisation possible passe par du Javascript.
Dans ton cas tu devras programmer l'ajout , la modification et la suppression de lignes dans ta table. Puis l'envoi vers le server pour mise à jour de la base.

L'idéal est de commencer par un tutoriel Javascript. http://javascript.developpez.com/cours/

ERE

Je me suis un peu documenté sur le java script et voila mon premier morceau de code.
code html :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<script type="text/javascript" language="javascript" src="util.js" ></script>
	<link rel="stylesheet" type="text/css" href="tab.css" >
</head>
<body onload="InitGrille();" >
 
<table cellpadding="0" cellspacing="0" id="grilleSaisie">
<caption>Saisie des écritures </caption>
<thead><tr>
  <th width="10" >Compte</th>
  <th width="10" >Pdt / Affect</th>
  <th width="10" >Nature</th>
  <th width="10" >Débit</th>
  <th width="10" >Crédit</th>
  <th width="10" >TVA</th>
  <th width="10" >Mtt TVA</th>
  <th width="10" >Quantité</th>
  <th width="10" >Nombre</th>
</tr></thead>
</table>
 
<br><br>
<form method=post id="tableau" action="test.php" >
	<input name="button" type="submit" value="enregistrer">
	<input type="button" class="ligne2" onclick="addRow(2);" value="ajouter Ligne">
</form>
</body>
</html>

code javascript :

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
 
function InitGrille()
{	
	// Insérer deux ligne vides aux tableaux
	InitRow(0);
	InitRow(1);
}
 
function InitRow(i)
{	var i2 = i + 1;
	document.getElementById('grilleSaisie').innerHTML = document.getElementById('grilleSaisie').innerHTML +
													  '<div id="test"><tr><td><input type="text" id="compte"></td>'+
														  '<td><input type="text" id="produit"></td>'+
														  '<td><input type="text" id="nature"></td>'+
														  '<td><input type="text" id="debit"></td>'+
														  '<td><input type="text" id="gredit"></td>'+
														  '<td><input type="text" id="tva"></td>'+
														  '<td><input type="text" id="mttTVA"></td>'+
														  '<td><input type="text" id="quantite"></td>'+
														  '<td><input type="text" id="nombre"></td></tr></div>';
}
 
function addRow(i)
{
	var i2 = i + 1;
	document.getElementById('grilleSaisie').innerHTML = document.getElementById('grilleSaisie').innerHTML +
														  '<div id="test"><tr><td><input type="text" id="compte"></td>'+
														  '<td><input type="text" id="produit"></td>'+
														  '<td><input type="text" id="nature"></td>'+
														  '<td><input type="text" id="debit"></td>'+
														  '<td><input type="text" id="gredit"></td>'+
														  '<td><input type="text" id="tva"></td>'+
														  '<td><input type="text" id="mttTVA"></td>'+
														  '<td><input type="text" id="quantite"></td>'+
														  '<td><input type="text" id="nombre"></td></tr></div>';
 
}

Voila mon problème est que lorsque j'ajoute une ligne, les données rentrées précédemment sont supprimer et cela m'affiche un tableau vide.

19/05/2009, 09h07
andry.aime

Salut,
1-Je me demande à quoi ça sert la variable i2 qui n'est jamais utilisé?
2-Avec ton code tu pourras avoir des elements avec le même id.
3- Utilise DOM pour créer des éléments et non pas innerHTML.

http://javascript.developpez.com/faq/?page=DOM
19/05/2009, 09h09
le_chomeur

http://jf-lepine.developpez.com/tutoriels/editgrid/
ne répondrait il pas a tes besoins ?