Discussion :

[BYALI]

Bonjour,
j'ai une application web et je voudrais créer une facture qui a deux tables:
table facture_entete
table facture_lignes

à la création, je voudrais mettre un formulaire dans un tableau dans lequel je donne la main à l'internaute de saisir ligne par ligne de façon brouillon, et lors du clic d'un bouton "enregistrer" je fais une requete insert dans la table "facture_lignes".

mon souci c'est comment je peut effectuer ceci?? je suis débutante dév web, et j'avoue que je suis habituée à delphi et le dbgrid et le cachupdate de ttable me règle tous mes problèmes.....
là je plante et je beug au démarrage.

y a t il un moyen pour m'orienter pour débuter???

et pour les articles je voudrais un moyen d'afficher la liste à chaque saisie pour faciliter la recherche???

sincèrement je suis perdue

[FMaz]

Je comprend pas ce que tu essaie de faire, mais:

à la création de quoi ?, je voudrais mettre un formulaire dans un tableau normalement c'est l'inverse... <form><table> dans lequel je donne la main style="cursor:pointer;" ? à l'internaute de saisir ligne par ligne ligne par ligne... c'est l'utilisateur qui décide normalement. Tu veux le forcer à remplir impérativement ligne par ligne, en ordre ? de façon brouillon c'est quoi cette "facon brouillon" ?, et lors du clic d'un bouton "enregistrer" je fais une requete insert dans la table "facture_lignes".

[BYALI]

imaginez que je crée une nouvelle facture pour un client X, dont la date=date système, N° auto.......etc pour ça pas de pb.

mais la facture contient de 1 à n lignes?? que je ne sais pas c l'utilisateur qui saisit.
je veux lui offrir un tableau qu'il puisse saisir ce qu'il veut, pour chaque article(c une ligne nouvelle) qui contient la qte, le prix........

tout ça il le saisit dans un (soit disantà brouillon)

et lors du clic sur un bouton "enregistrer" c la où j'effectue une requête qui me prend tout ce qu'il y a dans ce "tableau" et j'insert dans la table "facture_ligne"


je ne sais pas si je me fais comprendre?????
je sais que c pas évident ce que je dis, mais je pense qu'au moins un développeur a fait ça ??? on ne peut pas insérer directement dans la base, on passe par une saisie intermédiaire...........qu'on peut à tout moment annuler tout vous voyez ce que je veux dire???

[emmanuel.remy]

Salut,

L'idée pourrait être la suivante: tu crées ton entête de facture tout ce qu'il y a de plus normal, en utilisant les champs input HTML.
Ensuite tu crées une table dont chaque ligne sera une ligne de facture.
Tu crées une ligne générique avec les champs HTML nécessaires à la saisie (dont la liste de tes produits) .
Tu ajoutes un bouton "ajouter ligne"dont l'objectif est d'ajouter une ligne à ta table HTML en dupliquant la ligne générique.
Enfin tu inscris un bouton "envoyer" qui recupère l'entete, passe en revue chaque ligne de la facture et génère une structure que tu envoies au server pour traitement et insertion en base.

ERE

[Bovino]

J'ajoute à la réponse d'emmanuel.remy que tu pourras trouver de nombreuses ressources pour t'aiguiller sur la manière d'appliquer ses conseils dans la FAQ, les Sources et les Cours

[FMaz]

Donc, en clair, tu aimerais faire un tableau pour lequel il est possible d'ajouter dynamiquement des lignes ?

Il existe des facon de faire avec des createNode et appendChild, mais le plus simple pour toi serait peut-être d'emboiter des DIV, ce qui donnera l'illusion de lignes.

Premièrement, créer un tableau qui représente une ligne. Donc il faut faire une fonction qui retourne une nouvelle ligne.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function tableauHTML(id)
{
  var ret = "";
  ret += "<table class=\"ligne\">";
  ret += "<tr>";
  ret +=   "<td class=\"col1\"><input type=\"text\" name=\"noProduit_" + id "\" value=\"\" /></td>";
  ret +=   "<td class=\"col2\"><input type=\"text\" name=\"prix_" + id "\" value=\"\" /></td>";
    // ......... mettre autant de colones que nécéssaire
   ret += "</tr>";
   ret += "</table>";
 
  return ret;
}

Bon, mais la, si on a une fonction qui retourne un tableau représentant une ligne, encore faut-il avoir un endroit prévu ou on va l'insérer:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form method="post" action="save.php">
 
<input type="hidden" id="totalLigne" name="totalLigne" value="0" />
 
<table class="ligne">
  <tr>
  <th class="col1">Numéro produit</th>
  <th class="col2">Prix</th>
  </tr>
</table>
 
<br /><div id="ligne_1"><!-- Le contenu sera inséré ici --></div>
</form>

... Donc en fait, nous allons placer le tableau représentant une ligne dans le div#ligne_1, puis, comme nous pensons peut-être insérer une ligne #2, créer un div#ligne_2 vide, prêt à recevoir la future ligne.

Oh ! Et il ne faut pas oublier de mettre à jour input#totalLigne , car coté PHP, on saura de 1 à quoi boucler pour récupérer le total des lignes.


Donc on a besoin d'une fonction pour ajouter une nouvelle ligne:

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
 
function addLigne()
{
  //Récupérer et incrémenter le compte des lignes
  var ligne = document.getElementById("totalLigne").value;
  ligne++;
 
  //Préparer le contenu à ajouter
  var divHTML = "<br>";
  divHTML += tableauHTML(ligne); 
  divHTML += "<div id=\"ligne_" + (ligne+1) + "\"></div>";
 
  //Mettre à jour les contenus
  document.getElementById("ligne_" + ligne).innerHMTL = divHTML;
  document.getElementById("totalLigne").value = ligne;
 
}

Cette méthode à un petit inconvénient: Tu ne peux pas supprimer de ligne.
Ceci dit, elle est beaucoup plus simple que de faire des boucles pour ajouter des objets un par un au bon endroit.


Ah oui, j'imagine qu'il serait pratique d'insérer une première ligne, et de placer un bouton...

Alors voici un récapitulatif:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<script type="text/javascript">
//<!--
function tableauHTML(id)
{
  var ret = "";
  ret += "<table class=\"ligne\">";
  ret += "<tr>";
  ret +=   "<td class=\"col1\"><input type=\"text\" name=\"noProduit_" + id "\" value=\"\" /></td>";
  ret +=   "<td class=\"col2\"><input type=\"text\" name=\"prix_" + id "\" value=\"\" /></td>";
    // ......... mettre autant de colones que nécéssaire
   ret += "</tr>";
   ret += "</table>";
 
  return ret;
}
 
function addLigne()
{
  //Récupérer et incrémenter le compte des lignes
  var ligne = document.getElementById("totalLigne").value;
  ligne++;
 
  //Préparer le contenu à ajouter
  var divHTML = "<br>";
  divHTML += tableauHTML(ligne); 
  divHTML += "<div id=\"ligne_" + (ligne+1) + "\"></div>";
 
  //Mettre à jour les contenus
  document.getElementById("ligne_" + ligne).innerHMTL = divHTML;
  document.getElementById("totalLigne").value = ligne;
 
}
 
-->
</script>
 
 
<form method="post" action="save.php">
 
<input type="hidden" id="totalLigne" name="totalLigne" value="0" />
 
<table class="ligne">
  <tr>
  <th class="col1">Numéro produit</th>
  <th class="col2">Prix</th>
  </tr>
</table>
 
<br /><div id="ligne_1"><!-- Le contenu sera inséré ici --></div>
 
<br />
<br />
<input type="button" name="useless" value="Ajouter une ligne" onclick="addLigne();" />
</form>
 
 
<script type="text/javascript">
//<!--
addLigne(); //Ajouter la première ligne
//-->
</script>

Ps.: C'est non-testé, mais j'ai déjà utilisé cette façon de faire. Donc le concept est bon, mais peut-etre pas la syntaxe.

[BYALI]

j'ai déja essayé ça le pb, c'est pour faciliter la saisie de l'article, j'ai ajouter un bouton de recherche qui me mène vers une page de recherche facile de l'article et au retour elle me remplit l'input de l'article sans avoir à le saisir, mais le pb est le suivant:
au retour de la page de facture , toute les lignes que j'ai ajoutée, comme si de rien n'était, la page s'est réinitialisée..........

[FMaz]

Bah ouais, forcément: tu as quitté la page sans sauvegarder !

Fait une recherche qui ouvre un popup ou en ajax.

Sinon, tu pourrais faire en sorte qu'il soit possible de sauvegarder le brouillon: en ajax pour un résultats transparent. Pour éviter d'inonder ta table de brouillons d'entrés inutiles, tu stock un timestamps du moment de l'enregistrement, et au moment d'enregistrer les résultats, tu effectue aussi une requête de suppression des entrés expirées.

[Bovino]

Cela semblerait dire qu'il y a un début de code ! Ce serait bien de le voir.
Néanmoins, ce que tu décris est assez typique d'un lien dont le comportement par défaut n'est pas inhibé et qui recharge la page... du style :

Code :

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

<a href="#" onclick="ta_fonction()">

au lieu de :

Code :

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

<a href="#" onclick="ta_fonction(); return false">

[BYALI]

la page liste_dynam.php

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
45
46
47
48
49
 
<script language="JavaScript" src="fonctions.js"></script>
 
 
<?php //<!--><!-->
echo '<table align="center" border="0" width="942" bgcolor="#38603b"><tr><td><center><font face="verdana" size=2 color="white"><b>Nouvelle demande de dotation'.$mat.'</b></font>';
echo'</center></td></tr></table><br>';
?>	
<input name="ch" value="1" type="radio" checked >Par Tenue<br>
		<input name="ch" value="0" type="radio" >Par Habillement<br>
 
<?php
include('maquette/connexion.php');
$g=$_GET['rech'];
echo '<table  id="tablea" border="1" width="100%" cellspacing="0" class="Style1">';
echo '<tr><td>N°</td><td>Agent</td><td width=5%>Saison</td>
<td>Article</td><td width=5% >Taille</td><td width=5%>Qte</td></tr>';
 
$nb=1;
 
	echo'<tr> <td >'.$nb.'</td>	<td id="aa"><input name="ag'.$nb.'" value="'.$g.'"><a href="recherche.php?code='.$nb.' & action=agent" ><IMG SRC="images/rech.bmp" alt="" title="Rechercher" border=0 ></a> </td>';
 
 
	echo' <td width=5%><input type="texte" name="saison'.$nb.'" id="saison'.$nb.'" size=10 value="ete"></td> 
 
 
	<td id="a1"><select name="hab'.$nb.'>';
	///  récup habillement
	$r1='select code,design from habillement order by design ';
	$r=mssql_query($r1);
	$sel='';
	//if  ((empty($_POST['str'])==true )||($_POST['str']=='Tous')) 	{$sel='selected';} 
	echo '<option selected>-</option>';
	while ($t=mssql_fetch_row($r))
	{
	list($code,$des)=$t;
	$sel='';
	echo '<option value="'.$code.'">'.$des.'</option>';
	}
	echo '</select> </td>
 
	<td width=5%><input type="texte" name="taille'.$nb.'" size=5 ></td> 
	<td width=5%><input type="texte" name="qte'.$nb.'" size=5 value="1"></td> 
	</tr> '; 
$nb=$nb+1;
 echo '</table>';
 
?>
		<input type="button" value="Ajouter une ligne" onclick="AddRow(<? echo $nb;?>)" id="bt" >

le 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
 
function AddRow(nb){
    var newRow = document.getElementById('tablea').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = nb;
    newCell = newRow.insertCell(1);
    newCell.innerHTML = '<input name="ag'+nb+'" value=""><a href="recherche.php?code='+nb+' & action=agent" ><IMG SRC="images/rech.bmp" alt="" title="Rechercher" border=0 ></a> ';
	newCell = newRow.insertCell(2);
    newCell.innerHTML = '<input type="texte" name="sais'+nb+'">';
	newCell = newRow.insertCell(3);
    newCell.innerHTML = '<input type="texte" name="hab'+nb+'" size=20 >';
	newCell = newRow.insertCell(4);
    newCell.innerHTML = '<input type="texte" name="taille'+nb+'" size=5 >';
	newCell = newRow.insertCell(5);
   newCell.innerHTML = '<input type="texte" name="qte'+nb+'" size=5 value="1">';
 
	}

la page recherche.php

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
45
46
47
48
49
50
51
52
53
 
<?
include('maquette/connexion.php');
 
$w='';
if ($_POST['mat']!='') $w= 'mat like"'.$_POST['mat'].'%"';
if ($_POST['str']!='') if ($w!='') {$w= $w.' and str like"'.$_POST['str'].'%"';} else {$w= ' str like"'.$_POST['str'].'%"';}
if ($_POST['nom']!='') if ($w!='') {$w= $w.' and nom like"'.$_POST['nom'].'%"';} else {$w= ' nom like"'.$_POST['nom'].'%"';}
 
if ($w!='') {$w= ' where '. $w;}
 
 
 
if ($_GET['action']=='agent')
{
$req='select mat,nom,prenom,grade,sexe,str from agent '.$w.' order by mat';
}
echo $req;
 
$res=mssql_query($req);
$M='';if  ($_POST['mat']!='') $m=$_POST['mat'];
$n='';if  ($_POST['nom']!='') $n=$_POST['nom'];
$s='';if  ($_POST['mat']!='') $s=$_POST['str'];
 
echo '<form action="recherche.php?action=agent" method="post">Matricule:<input name="mat" value="'.$m.'"><br>
Nom:<input name="nom" value="'.$n.'"> <br> Structure: <input name="str" value="'.$s.'"><input type="submit" name="enreg" value="AFFICHER" ></form>';
 
 
echo '<table border="1" bordercolor="#38603b" cellspacing="0" class="Style1">';
	echo '<tr align="center" style="font-weight:bold " bgcolor="#759179"><b><td width=10%>Affectation</td><td width=10%>Matricule</td><td width=10%>Nom</td><td width=10%>Prénom</td><td width=10%>Sexe</td><td width=5%>Grade</td><td>.</td></b></tr>';
 
while ($test=mssql_fetch_row($res))
{
 
	list($mat,$nom,$prenom,$grade,$sexe,$str)=$test;
	echo '<tr><td width=10%>';
	echo $str;
	echo '</td><td width=10%>';
	echo $mat;
	echo '</td><td width=10%>';
	echo $nom;
	echo '</td><td width=10% align="center">';
	echo $prenom;
	echo '</td><td width=10% align="center">';
	echo $sexe;
	echo '</td><td width=5% align="center">';
	echo $grade;
	echo '</td><td width=5% align="center">';
	echo '</td><td align="center"><a href="liste_dynam.php?rech='.$mat.' & action=agent" ><IMG SRC="images/rech.bmp" alt="" title="OK" border=0></a><br>';
	echo '</td></tr>';
 
}
echo '</table>';

mais mettrai-je l'instruction de Bovino??

Code :

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

1
2
3
 
 
<a href="#" onclick="ta_fonction()">

[emmanuel.remy]

Re-Salut,

Pas le temps de coder 10 lignes que tu as déjà plusieurs propositions de code !

Si cela t'intéresse voila une solution que je viens de coder, correspondant à ce que je te proposais et qui est simple en passant par une ligne générique. Tu verras qu'elle ne nécessite que 5 lignes de code JS, mais qu'il faut bien sûr la compléter

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
45
46
47
 
<html>
  <head>
  <script type="text/javascript">
  function ajouterLigneFacture() {
    var tr = document.getElementById("generique").cloneNode(true);
    tr.removeAttribute("id");
    tr.style.display="";
 
    document.getElementById("lignesFacture").tBodies[0].appendChild(tr);
  }
 
  function supprLigne(tr) {
    document.getElementById("lignesFacture").deleteRow(tr.rowIndex);
  }
  </script>
 
  </head>
  <body>
    <div id="entete">
    Nom: <input type="text" name="nom" />
    Adresse: <input type="text" name="adresse" />
    </div>
 
    <table border="1" id="lignesFacture">
     <tr>
      <th>produit</th>
      <th>quantite</th>
      <th>montant HT</th>
      <th>Suppr.</th>
     </tr>
     <tr id="generique" style="display:none">
      <td>
        <select>
          <option>Tennis</option>
          <option>Kopa</option>
          <option>Ballon</option>
        </select></td>
      <td><input type="text" /></td>
      <td><input type="text" /> €</td>
      <td><button onclick="supprLigne(this.parentNode.parentNode)">Suppr</button></td>
     </tr>
    </table>  
 
    <button onclick="ajouterLigneFacture();">Ajouter ligne</button>
  </body>
</html>

ERE

[bigboomshakala]

Hello,

je pense que j'arrive un peu tard, mais concernant une table éditable il y a la v1.0 de ma HtmlEditTable
(sources complètes téléchargeables à la fin de l'article)

[BYALI]

waw emmanuel.remy ton code est extra, mais dans le cas où, au lieu d'avoir un select des produits (imagine que j'ai 1000), je fais un input et un bouton de recherche à coté qui me mène vers une page de recherche, au choix je reviens et je place le produit recherché dans l'input adéquat.....(voir le code de ma page recherche plus haut),
le souci c quand je reviens à cette page tout se réinitialise, y a pas moyen de suavegarder ma page avant que j'ouvre la recherche????

[BYALI]

bigboomshakala , merci pour ton lien mais la table n'est pas éditable, il n'y a pas d'input, je ne peux rien saisir dessus?

[bigboomshakala]

bigboomshakala , merci pour ton lien mais la table n'est pas éditable, il n'y a pas d'input, je ne peux rien saisir dessus?

bah il suffit d'aller sur le lien vers la démo de la version finale (dernière page) ou de cliquer sur l'image de la page une. là tu arrives sur la démo. pour éditer une cellule il faut double-cliquer dessus

[BYALI]

ah oui c vrai, j'ai pas fait attention

et pour ajouter une ligne?? j'associe le code que m'a donné "emmanuel.remy" c ça??

[bigboomshakala]

il y a des fonctions adaptées pour ajouter des lignes et des colonnes (fonctions Lines et Columns), pour récupérer les données (AllData et Data).

[BYALI]

et pour ajouter un select c possible dans une des cellules??

[bigboomshakala]

non ça c'est la v1. les select c'est prévu pour la v4 !

[BYALI]

je vous suis pas?!! c quoi V1 et V4?