Call Ajax et tableau dynamique

Version imprimable

01/04/2014, 04h25
Rick12345

Call Ajax et tableau dynamique
Bonsoir à tous!

Je me suis lancé un beau défi, je me suis récemment lancé dans le javascript, pour la refonte de mon application, et je suis présentement confronté à un petit problème.

Plutôt que de tout gérer côté serveur, et d'avoir à rafraîchir les pages, etc. J'ai décidé de passer au javascript : call ajax, etc.

Je me débrouille plutôt bien, mais je tente de faire quelque chose pour laquelle j'aurais besoin de quelques indications, si quelqu'un est en mesure de m'éclairer.

Je vous explique :

Pour faire simple, j'ai 3 colonnes :

Article | Quantité | Prix

Lorsque je sélectionne l'article dans la liste déroulante, je fais un call ajax et je retourne la quantité et le prix.

Jusque là, pas de problème. Mes valeurs sont bien retourné et associé aux champs Quantité et Prix. Je suis alors en mesure d'affecter ses valeurs à d'autres champs pour effectuer des calculs.

Ensuite, j'ai besoin d'ajouter de nouvelles lignes sur mon tableau/formulaire.

Article | Quantité | Prix
Article | Quantité | Prix
Article | Quantité | Prix
Article | Quantité | Prix

J'ai créer un bouton 'Ajouter' avec une petite fonction :
Code:

1 2 3 4 var tblBody=document.getElementById(tblId).tBodies[1]; var node=tblBody.rows[0].cloneNode(true); tblBody.appendChild(node);
Jusque là, tout fonctionne.

Le problème est que je désire pouvoir effectuer les mêmes actions avec les nouvelles lignes : sélectionner un article et effectuer un call ajax pour retourner les valeurs et les associés au champ quantité et prix de la même ligne.

Comment pouvoir identifier les lignes afin d'associer les bonnes valeurs aux bons endroits? Car si j'associe les valeurs retournés au class... les class ont tous le même nom, ça ne fonctionne pas?

J'imagine qu'il me manque un élément logique.

Merci d'avance pour votre aide.
02/04/2014, 22h02
sekaijin

il va falloir être plus clair

car là ....
A+JYT

Salut,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<table id="table1">
    <tr id="tr1">
       <td>Article<input name="art1" type="text" value=""></td>
       <td>Quantite;<input name="qtt1" type="text" value="" ></td>
       <td>Prix<input name="prix1" type="text" value="" ></td>
   </tr>
   <tr id="tr2">
      <td>Article<input name="art2" type="text" value=""></td>
      <td>Quantite;<input name="qtt2" type="text" value="" ></td>
     <td>Prix<input name="prix2" type="text" value="" ></td>
  </tr>
</table>
<button onclick="addTr()"/>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function addTr(){
   var tb = document.getElementById("table1");
   var trsTable = tb.rows;
   var idx = trsTable.lenght;
   var nxTr = trsTable[idx].cloneNode(true);
   var tds = nxTr.cells
 
   tds[0] = // html du premier td
   tds[1] = // html du deuxieme td
   ... // ne pas oublier de construire la valeur des attributs name, id / ex: "art" + (idx +1) = art3
   // 
   nxTr.id="tr"+ (idx +1);
 
   tb.appendChild(nxTr)
 
}

De cette manière tu peux identifier chaque ligne car tu respectes une règle de nommage "tr"+idx.
De cette manière tu peux aussi mettre à jour l'attribut onchange="mafunction('idx') de ta liste d'articles.

Je ne sais pas si ça va t'aider (pas tester), j'espère. Mais il y a surement mieux.

Je pense aussi que tu pourrais mieux expliquer ton problème ou mettre plus de code pour voir ce que tu as déjà fait. ;)