travailler dans un tableau brouillon

**bigboomshakala** · 22/05/2009, 20h47

là vois-tu c'est la 1ère version.
j'ai prévu un certain nombre de lots d'évolution, chacun apportant de nouvelles possibilités.
la prise des select, checkbox, radio... est prévue pour la 4ème version.
avant j'ai prévu : gestion des exceptions, unicité du nommage (ligne, colonne), tri, navigation avec les flèches, masques de saisie, etc...

**BYALI** · 22/05/2009, 20h52

je suis membre d'un projet devloppement application web pour une grand société, sincèrement j'avoue que je ne sais plus quoi faire???

quelle solution prendre??
ton tableau est super, je peux saisir, je peux ajouter des lignes, mais est ce que je peux insérer des sélects, et si je veux ajouter un bouton de recherche pour faciliter la saisie. j'ai commencé avec le code de "emmanuel.remy" mais il me reste un détail, et votre code "bigboomshakala" mais il me reste un détail.....

**FMaz** · 22/05/2009, 21h11

@emmanuel.remy

Le code sont très intéressant... (Vraiment, il n'y a aucun sarcasme. je connais pas la méthode clone.) mais comment allez-vous identifier les champs input avec cette facon de faire ?
Car là, d'une ligne à l'autre, on aura exactement le même name pour les champs.

**emmanuel.remy** · 22/05/2009, 23h13

je fais un input et un bouton de recherche à coté qui me mène vers une page de recherche

Tu n'es pas obligé de procéder ainsi: tu peux par exemple utiliser AJAX pour effectuer une recherche d'articles sans recharger ta page, et /ou tu peux aussi disposer d'une "fenêtre interne" (type balise DIV initialement cachée , et qu'on montre dès que besoin) qui abrite la recherche, sans passer par une page sur le server dédiée à la cette tâche.

Mais à mon avis, fais toi une maquette sans tenir trop compte de cela (cette cinématique est connue, donc sans surprise), tu modifieras ce point une fois la faisabilité globale de ta facture établie.

Ci-dessous l'exemple initial un rien modifié pour "maquetter" (c'est un bien grand mot dans ce cas, je n'ai pas mis de code concret, juste un balbutiement d'ergonomie

) cela:

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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);
  }
 
  function validRecherche() {
    alert('Validation de la recherche: injection du produit sélectionné, ...');
    document.getElementById("recherche").style.display="none";
  }
 
  function dispRecherche(node) {
    document.getElementById("recherche").style.display="block";
  }  
  </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><button onclick="dispRecherche(this);">...</button></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>
 
    <div id="recherche" style="background-color:yellow;display:none;z-order:1000">
      <table>
      <tr><td>Recherche d'un produit</td></tr>
        <tr><td><input type="text" /> (filtre de recherche)</td></tr>
        <tr><td><select>
          <option>Tennis</option>
          <option>Kopa</option>
          <option>Ballon</option>
          <option>Canne à pêche</option>
          <option>Baton de randonnée</option>
          <option>Tente igloo</option>
          <option>chronometre</option>
          <option>Lunette de glacier</option>
        </select></td></tr>
        <tr><td><button onclick="validRecherche();">Valider</button></td></tr>
      </table>
    </div>
 
  </body>
</html>

ERE

**emmanuel.remy** · 22/05/2009, 23h21

@FMaz: une simple navigation dans le DOM fait l'affaire. Basiquement si tu prends une ligne de la table tu récupères ensuite sans difficulté les INPUTS, les SELECT etc...
Mais si le développeur ne peut se passer de document.getElementById

on peut tout aussi générer des id dont le libellé pré-établi se calera sur un item donné (article001 et quantite001, article002 et quantite002, ...)

ERE

**BYALI** · 23/05/2009, 08h55

@ emmanuel.remy
et les names des inputs, ils sont tous pareil, comment faire pour injecter ligne par ligne dans ma table lors de l'enregistrement???

**BYALI** · 23/05/2009, 09h06

et comment accéder à l'input se trouvant dans la 3ème ligne de la 2ème colonne?? pour mettre une information X??

**emmanuel.remy** · 23/05/2009, 13h59

et les names des inputs, ils sont tous pareil, comment faire pour injecter ligne par ligne dans ma table lors de l'enregistrement???

Le pus simple c'est de te constituer une structure javascript (tableau ou autre) que tu enverras au final vers ton server pour enregistrement

et comment accéder à l'input se trouvant dans la 3ème ligne de la 2ème colonne?? pour mettre une information X??

Par le DOM. Je vais essayer de te faire une démo rapide.

ERE

**BYALI** · 23/05/2009, 14h04

dans ce cas vous allez vraiment me soulager, j'attends votre démo impatiemment

**emmanuel.remy** · 23/05/2009, 14h46

Re-Salut,
Attention, ne pas oublier que les codes fournis sont avant tout des démos et de bonnes pistes pour concevoir son appli !

Donc ce que j'ai modifié: les produits dans les lignes de sont des zones de texte qui verront s'afficher le code article, la description, ... Sur clic du bouton (...) on obtient la zone de recherche (non fonctionnelle, à implémenter) et si tu choisis un article dans la liste et que tu valides, alors l'article est envoyé à sa place dans la ligne de facture. J'ai tout commenté, détaillé les étapes, et tu peux t'en inspirer pour la suite.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  //la ligne en cours d'"édition"
  var trEdit;
 
  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);
  }
 
  function validRecherche() {
    //alert('Validation de la recherche: injection du produit sélectionné, ...');
 
    //la liste de recherche des articles
    var sel = document.getElementById("articleSelectionne");
    //l'opton sélectionnée
    var opt = sel.options[sel.selectedIndex];
    //l'article (code, libellé, au choix) à afficher
    var article = opt.value + " - " + opt.text;
    //la liste des inputs pour la ligne en cours d'édition
    var inputs = trEdit.getElementsByTagName("input");
    //on considère qu'on a uniquement des boites de type text
    //sinon faire un boucle pour cibler l'input concerné
 
    //on affiche dans la première zone de saisie
    inputs[0].value = article;  
 
    //plus de sélection en cours
    trEdit = null;
 
    //on cache la recherche
    document.getElementById("recherche").style.display="none";
  }
 
  function dispRecherche(tr) {
    document.getElementById("recherche").style.display="block";
    //on enregistre la ligne en cours d'édition
    trEdit = tr;
  }  
 
 
  </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>
        <input type="text" /><button onclick="dispRecherche(this.parentNode);">...</button></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>
 
    <div id="recherche" style="background-color:yellow;display:none;z-order:1000">
      <table>
      <tr><td>Recherche d'un produit</td></tr>
        <tr><td><input type="text" /> (filtre de recherche)</td></tr>
        <tr><td><select id="articleSelectionne">
          <option value="ART-001">Tennis</option>
          <option value="ART-002">Kopa</option>
          <option value="ART-003">Ballon</option>
          <option value="ART-004">Canne à pêche</option>
          <option value="ART-005">Baton de randonnée</option>
          <option value="ART-006">Tente igloo</option>
          <option value="ART-007">chronometre</option>
          <option value="ART-008">Lunettes de glacier</option>
        </select></td></tr>
        <tr><td><button onclick="validRecherche();">Valider</button></td></tr>
      </table>
    </div>
 
  </body>
</html>

Bon après-midi,

ERE

**BYALI** · 23/05/2009, 15h38

quand je clique sur un bouton "enregistrer" j'ai l'habitude de travailler avec $_POST[nomdeinput] en utilisant une boucle for et je parcours tout mon tableau............
MAIS dans ce cas de tableau cloné avec des oeuds (node), comment faire??

**emmanuel.remy** · 23/05/2009, 16h00

Envoyé par BYALI

quand je clique sur un bouton "enregistrer" j'ai l'habitude de travailler avec $_POST[nomdeinput] en utilisant une boucle for et je parcours tout mon tableau............
MAIS dans ce cas de tableau cloné avec des oeuds (node), comment faire??

Pourquoi mettre 12 points de suspension dans le message ?
Si tu te penches un peu sur le code et que tu appliques tes connaissances de PHP, tu trouves très rapidement qu'il suffit de compléter légèrement le code précédent pour te satisfaire.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  
  var trEdit;
  
  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);
  }
  
  function validRecherche() {
    //alert('Validation de la recherche: injection du produit sélectionné, ...');
    
    //la liste de recherche des articles
    var sel = document.getElementById("articleSelectionne");
    //l'opton sélectionnée
    var opt = sel.options[sel.selectedIndex];
    //l'article (code, libellé, au choix) à afficher
    var article = opt.value + " - " + opt.text;
    //la liste des inputs pour la ligne en cours d'édition
    var inputs = trEdit.getElementsByTagName("input");
    //on considère qu'on a uniquement des boites de type text
    //sinon faire un boucle pour cibler l'input concerné
    
    //on affiche dans la première zone de saisie
    inputs[0].value = article;  
    
    //plus de sélection en cours
    trEdit = null;
    
    //on cache la recherche
    document.getElementById("recherche").style.display="none";
  }
  
  function dispRecherche(tr) {
    document.getElementById("recherche").style.display="block";
    //on enregistre la ligne en cours d'édition
    trEdit = tr;
  }  
  
  
  </script>
  
  </head>
  <body>
    <form action ="ttt.php" method="post">
    <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>
        <input type="text" name="article[]"/><button type="button" onclick="dispRecherche(this.parentNode);">...</button></td>
      <td><input type="text" name="quantite[]"/></td>
      <td><input type="text" name="montant[]"/> €</td>
      <td><button type="button" onclick="supprLigne(this.parentNode.parentNode)">Suppr</button></td>
     </tr>
    </table>  
    
    <button type="button" onclick="ajouterLigneFacture();">Ajouter ligne</button>
    <input type="submit" value="Envoyer" />
</form> 
 
    <div id="recherche" style="background-color:yellow;display:none;z-order:1000">
      <table>
      <tr><td>Recherche d'un produit</td></tr>
        <tr><td><input type="text" /> (filtre de recherche)</td></tr>
        <tr><td><select id="articleSelectionne">
          <option value="ART-001">Tennis</option>
          <option value="ART-002">Kopa</option>
          <option value="ART-003">Ballon</option>
          <option value="ART-004">Canne à pêche</option>
          <option value="ART-005">Baton de randonnée</option>
          <option value="ART-006">Tente igloo</option>
          <option value="ART-007">chronometre</option>
          <option value="ART-008">Lunettes de glacier</option>
        </select></td></tr>
        <tr><td><button type="button" onclick="validRecherche();">Valider</button></td></tr>
      </table>
    </div>

  </body>
</html>

et ttt.php:

Code :

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

1
2
3
4
5
6
7
<html>
  <body>
    <pre>
       <?php var_dump($_POST); ?>
    </pre>
  <body>
</html>

ERE

**BYALI** · 23/05/2009, 16h32

waw c bon maintenant j'ai compris, j'avoue qu'à l'aide de ce forum , on ne peut dire qu'on est seul, sincèrement je vous remercie de cette présence incroyable.

en tout cas ça répond à mon interrogation, je vais essayer mon source complet, avec insertion dans la table. et je vous confirme, j'aurais besoin du cas où dans mon tableau il y a des selects, comment juste récupérer la donnée comme l'instruction suivante:

var inputs = trEdit.getElementsByTagName("input");
//on considère qu'on a uniquement des boites de type text
//sinon faire un boucle pour cibler l'input concerné

**emmanuel.remy** · 23/05/2009, 16h43

Envoyé par BYALI

waw c bon maintenant j'ai compris, j'avoue qu'à l'aide de ce forum , on ne peut dire qu'on est seul, sincèrement je vous remercie de cette présence incroyable.

en tout cas ça répond à mon interrogation, je vais essayer mon source complet, avec insertion dans la table. et je vous confirme, j'aurais besoin du cas où dans mon tableau il y a des selects, comment juste récupérer la donnée comme l'instruction suivante:

Si tu as des select sur une ligne:

Code :

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

var selects = trEdit.getElementsByTagName("select");

C'est exactement la même démarche et tu peux mixer les 2.

ERE

**BYALI** · 23/05/2009, 16h58

emmanuel.remy a dit

Quand une tête pense seule, elle devient folle.

sincèrement vous avez raison. je vous tire chapeau de votre patience. je vous tiens au courant de mon évolution.

je vous donne mon histoire brièvement pour avoir une idée:
" je suis spécialiste delphi, j'ai réalisé des applications multiples de gestion: gestion commercial, production, prévisions, tableaux de bord, gestion identification par code barre.......etc
l'année passé j'ai fait formation en PHP MYSQL pour faire un petit site web dynamique avec commandes en lignes quelque chose de simple.
Mais cette année, on a effectué une convention avec un client pour une application client-server (delphi sql server) j'étais prête.....et voila qu'il demandent du coup de changer et de faire application web car ils ont plusieurs sites distants.

donc sincèrement le démarrage était difficile et voila que je trouve ceux qui me font un coup de pouce.

vous êtes super

**emmanuel.remy** · 23/05/2009, 17h10

Très heureux d'avoir pu contribuer à donner un coup de main.

Bon courage pour la suite.

ERE

**FMaz** · 24/05/2009, 22h14

Envoyé par emmanuel.remy

@FMaz: une simple navigation dans le DOM fait l'affaire. Basiquement si tu prends une ligne de la table tu récupères ensuite sans difficulté les INPUTS, les SELECT etc...
Mais si le développeur ne peut se passer de document.getElementById

on peut tout aussi générer des id dont le libellé pré-établi se calera sur un item donné (article001 et quantite001, article002 et quantite002, ...)

ERE

Je parle du cas standard: où le formulaire est soumis en POST, et que celui-ci n'a pas de pré-traitement avant le submit.

Si tout les input ont le même name, il va se passer quoi sur le script qui reçois les données POST ?

**emmanuel.remy** · 24/05/2009, 23h53

Envoyé par FMaz

Je parle du cas standard: où le formulaire est soumis en POST, et que celui-ci n'a pas de pré-traitement avant le submit.

Si tout les input ont le même name, il va se passer quoi sur le script qui reçois les données POST ?

Evidemment dans ce cas...

Mais l'idée initiale était de constituer une structure javascript (tableau ou autre) envoyée vers le server pour enregistrement.
Tu pourras noter que ce n'est pas l'idée finale qui a été retenue et que des noms ont été donnés au champs du formulaire, comme tu le laissais entendre, pour effectuer un post "traditionnel".

ERE

**FMaz** · 25/05/2009, 03h04

Mais je crois que la solution idéale serait effectivement basé sur ta méthode, avec une modification des attributs name= sur les éléments nouvellement créés.

Il serait peut-être même possible d'automatiser celà pour créer un système plus versatile.
C'est à dire de cloner une ligne générique avec des input du genre:

Code :

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

1
2
 
<input name="produit_%id" value="" />

Puis après avoir cloné cette ligne, changer la valeur de l'attribut name avec un remplacement du contenu de la chaine de caractère. (Remplacer %id par la valeur désignant le numéro de ligne)

**emmanuel.remy** · 25/05/2009, 11h55

Il serait peut-être même possible d'automatiser celà pour créer un système plus versatile

Bien sûr. Tout est envisageable, et comme toujours ce n'est qu'une question de temps et d'implication...

ERE

travailler dans un tableau brouillon

JavaScript

Discussions similaires

Partager

Partager