Bonjour,
j'ai besoin que vous m'aidiez sur un script de gestion de lignes de factures que je veux mettre en place. Je n'arrive pas à trouver le moyen en javascript de pouvoir identifier sur quelle ligne de facture l'utilisateur est positionné pour pouvoir faire le calcul du montant de la ligne avec montant = quantité saisie x tarif du produit choisi.
Il faut noter que le nombre de lignes de factures n'est pas connu au départ : l'utilisateur peut en insérer selon son besoin (bouton "insérer ligne de facture").
Voici ci-après le code source de ce que j'ai déjà développé, merci beaucoup pour votre aide :
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
102
103
104 <html> <head> <title>Lignes de facture</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <SCRIPT LANGUAGE="JavaScript"> // scripts pour gestion des lignes de facture function dtableInit() { var table = document.getElementsByTagName('TABLE'); for ( var i = 0; i < table.length; i++ ) { // on récupère tous les tableaux dynamiques if ( table[i].className == 'dTable' ) { var tbody = table[i].tBodies[0]; var newTr = tbody.rows[0].cloneNode(true); // on masque la première ligne du tbody (la ligne de reference) tbody.rows[0].style.display = 'none'; // on en ajoute une tbody.appendChild(newTr); } } } function getParent(element, parentTagName) { if ( ! element ) return null; else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() ) return element; else return getParent(element.parentNode, parentTagName); } function addLigne(link) { // 1. récuperer le node "TABLE" à manipuler var td = link.parentNode; var table = getParent(td,'TABLE'); // 2. on va manipuler le TBODY var tbody = table.tBodies[0]; // 3. on clone la ligne de reference var newTr = tbody.rows[0].cloneNode(true); tbody.appendChild(newTr); if ( document.all ) newTr.style.display = "block"; // pour IE else newTr.style.display = "table-row"; // pour Gecko } function delLigne(link) { if (confirm('ATTENTION : Vous êtes sur le point d\'effectuer une suppression.')) { // 1. récuperer le node "TABLE" à manipuler var td = link.parentNode; var table = getParent(td, 'TABLE'); // 2. récuperer le TBODY var tbody = table.tBodies[0]; // 3. Supprimer le TR tbody.removeChild(getParent(td, 'TR')); } } function calculMontantLigneFacture(link) { // code à insérer pour calcul du montant de chaque ligne à partir des zones Quantité et Tarif du produit sélectionné } window.onload = dtableInit; </SCRIPT> </head> <body> <center> <table width="1000" border="0" cellspacing="0" cellpadding="0"> <form name="formulaire" action="" method="POST" enctype="multipart/form-data"> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"> <td align="center"> <table width="100" border="0" cellspacing="1" cellpadding="1" > <tbody> <tr bgcolor="#FFFFFF" class="texte10"> <td nowrap> produit <select name="l_produit[]" onChange="calculMontantLigneFacture();"> <option value="">choisir produit...</option> <option value="1">produit 1</option> <option value="2">produit 2</option> <option value="3">produit 3</option> </select> quantité <input size="4" type="text" name="l_quantite[]" onChange="calculMontantLigneFacture();"> tarif <input size="10" type="text" name="l_tarif[]" onChange="calculMontantLigneFacture();"> montant <input size="10" type="text" name="l_montant[]" onFocus="blur(this);"> <input type="button" value="supprimer la ligne de facture" onClick="delLigne(this); return false;"> </td> </tr> </tbody> <tr bgcolor="#FFFFFF" class="texte10"> <td align="center"><input type="button" value="insérer une ligne de facture" onClick="addLigne(this); return false;"></td> </tr> </table> </td></tr> <tr><td align="center"> </td></tr> </td></tr> <tr><td align="center"><input type="submit" name="bouton_ok" value="Ajouter la facture"></td></tr> </table> </td> </tr> </form> </table> </center> </body> </html>
Partager