Bonsoir!
Je suis entrain de faire un formulaire qui calcule un devis automatiquement. pour cela je crée des champs dynamiquement pour permettre de saisir autant des ligne que l'on veut. Pour ça je pense que le code marche.
Ensuite j'ai besoin de calculer dynamiquement le total des ses champs. le problème ce qu'il calcul la ère ligne mais pas les autres. j'ai récupéré le code de calcul par ici, merci de votre.
Code HTML :
<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é</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></body></html>Code Javascript :
<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(){
//-- 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"> </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"> </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"> </div>';
O_Cell = O_Row.insertCell(-1);
O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;"> 0</div><div class="separateur"> </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"> </div>';
O_Cell = O_Row.insertCell(-1);
O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;">0 ¤ </div><div class="separateur"> </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"> </div>';
O_Cell = O_Row.insertCell(-1);
O_Cell.innerHTML = '<div class="fact-b-r"></div>';
}
</script>