tableau éditable + base de donnée

**munos46** · 07/05/2009, 18h07

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.

**emmanuel.remy** · 07/05/2009, 18h13

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

**munos46** · 19/05/2009, 08h51

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

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
<!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 :

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
 
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.

**andry.aime** · 19/05/2009, 09h07

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

**le_chomeur** · 19/05/2009, 09h09

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

tableau éditable + base de donnée

JavaScript

Vue hybride

Discussions similaires

Partager

Partager