Des calculs dynamiques

**sfarouk** · 08/03/2011, 17h52

Bonjour tout le monde!
Je suis entrain de travailler sur une application au niveau de ma réalisation et je suis bloqué sur un script pendant 2 jours et j'avoue que je ne suis pas bon en javascript.

Je suis entrain de travailler sur un formulaire de saisie de devis qui laisse la possibilité d'ajouter autant des champs de saisie dynamiquement que l'on veut et supprimer quand on le souhaite, à ce niveau tout est parfait.

Ensuite, à la saisie de quantité et prix_unitaire, on doit avoir le montant calculé directement. du coup pour la premiere ligne ça marche, il effectue les calcules mais les autres champs ne marche pas.

j'ai ci-joint mon fichier qui contient le script que j'ai aussi documenté.
Merci

Code html :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<html>
<body onload="Create_Ligne();">
 
                                      <table id="fact-tablee" style="width:507px;margin-top:10px;" cellpadding="0" cellspacing="0">
                                        	<tr>
                                            	<th class="corn-fact-t-l"></th>
                                                <th class="fact-heade" style="width:166px;">DESIGNATION</th>
                                           	  	<th class="fact-heade" style="width:58px;">Qt&eacute;</th>
                                                <th class="fact-heade" style="width:82px;">P.U.</th>
                                            	<th class="fact-heade" style="width:38px;">TVA</th>
                                                <th class="fact-heade" style="width:60px;">PRIX HT</th>
                                            	<th class="fact-heade" style="width:59px;">PRIX TTC</th>
                                                <th class="fact-heade" style="width:30px;"></th>
                                                <th class="corn-fact-t-r"></th>
                                            </tr>
 
                                      </table>
 
									  <table>
									        <tr>
									              <th><input 	type="button" onclick="Create_Ligne();" value="Ajouter" /> </th>
									        </tr>
									  </table>
 
 
<script language="javascript">
//---------------
function Calcul(){
 
     var Ind=1,
	  Obj   = null,
      Qte,
      Prix,
      Total = 0,
      Valeur;
 
  //-- tant que l'objet existe
  while( Obj = document.getElementById('qte')){
    //-- recup des valeurs
    Qte    = parseInt( Obj.value);
 
    Prix   = parseFloat( document.getElementById('pu').value);
	Valeur = Qte * Prix;  // pas mis les tests si isNaN
    //-- affiche le resultat
    document.getElementById('montant').value = Valeur;
    //-- ajoute dans total
    Total += Valeur;
    //-- au suivant
    Ind ++;
  }
  //-- mets dans total
 // document.getElementById( "total").value = Total;
}
 
var Compteur = 0;
//--------------------------
function Delete_Ligne( obj_){
  var Parent;
  var Obj = obj_;
  if( Obj){
    //-- tant que pas la balise <TR>
    do{
       Obj = Obj.parentNode;
    }while( Obj.tagName != "TR")
    //-- Recup du parent
    Parent = Obj.parentNode;
    //-- Suppression de la ligne
    if( Parent){
      Parent.deleteRow( Obj.rowIndex)
    }
  }
}
//----------------------
function Create_Ligne(i){
  //-- compteur pour le FUN
  Compteur++;
  //-- Get objet tableau
  var O_Table = document.getElementById('fact-tablee');
  //-- Get nombre de ligne du tableau
  var NbrLigne = O_Table.rows.length;
  //-- Position d'insertion
  var Pos = NbrLigne;
  //-- Insertion d'une ligne
  O_Row  = O_Table.insertRow( Pos);
 
  //-- Insertion des cellules
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = O_Row.rowIndex;
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div align="center"><input type="text"  name="designation[]" class="inp-design" value="designation n°' +Compteur +'"/></div><div class="separateur">&nbsp;</div>';
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div class="border" style="text-align:center;"><input type="text"  id="qte" name="qte[]"      class="inp-qte"  onKeyUp="Calcul()" /></div><div class="separateur">&nbsp;</div>';
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div class="border" style="text-align:center;"><input type="text"  id="pu" name="pu[]" class="inp-pu"  onKeyUp="Calcul()"/></div><div class="separateur">&nbsp;</div>';
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;"> 0</div><div class="separateur">&nbsp;</div>';
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = ' <div class="border" style="text-align:center;height:18px;">  <input type="text" id="montant" name="montant[]"  class="inp-pu" /></div><div class="separateur">&nbsp;</div>';
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;">0 € </div><div class="separateur">&nbsp;</div>';
 
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;"><input type="image" src="images/cross.png" onClick="Delete_Ligne(this)" /></div><div class="separateur">&nbsp;</div>';
 
 O_Cell = O_Row.insertCell(-1);
 O_Cell.innerHTML = '<div class="fact-b-r"></div>';  
}
 
</script>
</body>
</html>

Des calculs dynamiques

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager