script type matrice

**alblanch** · 05/10/2009, 12h02

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">&nbsp;</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>

**le_chomeur** · 05/10/2009, 16h08

sur ton appel :
this.parentNode.parentNode dans ton cas te renvois la ligne
calculMontantLigneFacture(this.parentNode.parentNode);

sur ta méthode, tu as donc a faire par exemple

Code :

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

1
2
3
4
5
function calculMontantLigneFacture(MaLigne){
//Récupération des champs input
var MesChamps = MaLigne.getElementsByTagName('input');
MesChamps[2].value = MesChamps[0] * MesChamps[1];
}

c'est schématique, il te faut vérifier la quantité par défaut ...

de plus pour ton champs sur lequel tu fait : onfocus = blur(this) ...
autant mêttre un champs en readonly ;-)

**alblanch** · 05/10/2009, 20h22

Merci beaucoup Le_chomeur pour cette réponse. Avant de l'essayer pour que je comprenne, peux-tu m'expliquer pourquoi mettre 2 fois parentNode ?

**alblanch** · 05/10/2009, 20h34

en tout cas, le_chomeur, je viens d'essayer ce que tu as préconisé et ça marche très bien (j'ai juste ajouté value aux 2 champs pour le calcul par rapport au code que tu m'as fourni). Ca me dépanne super.

**le_chomeur** · 06/10/2009, 09h01

2 fois parent node car le premier fait référence au td , donc celui d'après au tr la ligne ne gros ça donne :

moi.monparent.monparent =

this , TD , TR

donc la TR ^^

script type matrice

JavaScript

Vue hybride

Discussions similaires

Partager

Partager