すべての入力の総和

Question

私の配列のすべての入力の合計をdivに瞬時に表示したいと思います。ここ は私の完全なコードです：

<script type="text/javascript"> 
function calcul(i){ 
    var prix = Number(document.getElementById("Fr_Quantite_"+i).value); 
    var quantite = Number(document.getElementById("Fr_Prix_"+i).value); 
    var ttc = Number(prix * quantite); 
    document.getElementById("Fr_Total_"+i).value = ttc; 
} 
</script> 

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="TableauJaquery1" class="Tableau"> 
    <thead> 
    <tr> 
     <th align="center"><strong>Libellé</strong></th> 
     <th width="80" align="center"><strong>Quantité</strong></th> 
     <th width="100" align="center"><strong>Prix</strong></th> 
     <th width="100" align="center"><strong>Total</strong></th> 
    </tr> 
    </thead> 

    <tbody> 
    <?php 
    $Stat = $pdo->query("SELECT * FROM ".$TB_PRODUITS." WHERE ".$PAYS."='1' AND Activer = 1 AND Stock = '1' ORDER BY Marque ASC; "); 
    $i = 0; 
    while($data = $Stat->fetch(PDO::FETCH_ASSOC)){ 
    ?> 
    <tr> 
     <td align="left" valign="middle"> 
     <?php echo $data["Libelle"]." ".$data["Contenance"]; ?> 
     </td> 
     <td align="center" valign="middle"> 
     <input type="text" class="span2" id="Fr_Quantite_<?php echo $i;?>" style="width:100%; text-align:center; margin:0;" maxlength="2" value="0" onblur="calcul('<?php echo $i;?>')"> 
     </td> 
     <td align="right" valign="middle"> 
     <input type="text" class="span2" id="Fr_Prix_<?php echo $i;?>" style="width:100%; text-align:right; margin:0;" maxlength="2" readonly value="<?php echo $data["Prix"]; ?>" onblur="calcul('<?php echo $i;?>')"> 
     </td> 
     <td align="right" valign="middle"> 
     <input type="text" class="span2" id="Fr_Total_<?php echo $i;?>" style="width:100%; text-align:right; margin:0;" maxlength="2" readonly value="0"> 
     </td> 
    </tr> 
    <?php 
    $i++; 
    } 
    ?> 
    </tbody> 
</table> 

Answer 1

PHPコードと、そのようなでテストには少し難しいが、私はoninputの代わりonblurを使用してparseIntの代わりNumberを使用します。どのように機能するのですか？

<script type="text/javascript"> 
 
    function calcul(i) { 
 
    var prix = parseInt(document.getElementById("Fr_Quantite_" + i).value); 
 
    var quantite = parseInt(document.getElementById("Fr_Prix_" + i).value); 
 
    var ttc = prix * quantite; 
 
    document.getElementById("Fr_Total_" + i).value = ttc; 
 
    
 
    updateTotal(25); 
 
    } 
 

 
    function updateTotal(sale) { 
 
    var totals = document.getElementsByClassName("js-totals"); 
 
    var total = 0; 
 
    
 
    for (var i=0; i < totals.length; i++) { 
 
     total += totals[i].value; 
 
    } 
 
    total *= (100 - sale)/100; 
 
    
 
    document.getElementById("TotalGlobal").innerHTML = total; 
 
    document.getElementById("TotalGlobal25").innerHTML = total; 
 
    } 
 
</script> 
 

 
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="TableauJaquery1" class="Tableau"> 
 
    <thead> 
 
    <tr> 
 
     <th align="center"><strong>Libellé</strong></th> 
 
     <th width="80" align="center"><strong>Quantité</strong></th> 
 
     <th width="100" align="center"><strong>Prix</strong></th> 
 
     <th width="100" align="center"><strong>Total</strong></th> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody> 
 
    <?php 
 
    $Stat = $pdo->query("SELECT * FROM ".$TB_PRODUITS." WHERE ".$PAYS."='1' AND Activer = 1 AND Stock = '1' ORDER BY Marque ASC; "); 
 
    $i = 0; 
 
    while($data = $Stat->fetch(PDO::FETCH_ASSOC)){ 
 
    ?> 
 
    <tr> 
 
     <td align="left" valign="middle"> 
 
     <?php echo $data["Libelle"]." ".$data["Contenance"]; ?> 
 
     </td> 
 
     <td align="center" valign="middle"> 
 
     <input type="text" class="span2" id="Fr_Quantite_<?php echo $i;?>" style="width:100%; text-align:center; margin:0;" maxlength="2" value="0" oninput="calcul('<?php echo $i;?>')"> 
 
     </td> 
 
     <td align="right" valign="middle"> 
 
     <input type="text" class="span2" id="Fr_Prix_<?php echo $i;?>" style="width:100%; text-align:right; margin:0;" maxlength="2" readonly value="<?php echo $data[" Prix "]; ?>" oninput="calcul('<?php echo $i;?>')"> 
 
     </td> 
 
     <td align="right" valign="middle"> 
 
     <input type="text" class="span2 js-totals" id="Fr_Total_<?php echo $i;?>" style="width:100%; text-align:right; margin:0;" maxlength="2" readonly value="0"> 
 
     </td> 
 
    </tr> 
 
    <?php 
 
    $i++; 
 
    } 
 
    ?> 
 
    </tbody> 
 
</table>

UPDATE：各行の合計入力にupdateTotal機能とjs-totalクラスを追加しました。 updateTotal(25)を実行すると、合計を更新できます。あなたは25をあなたが価格から欲しいパーセントに変更することができます。

これは、別の要素を選択することによって「パーセントオフ」を設定できます。そうしたい場合は、別の質問をしてここにリンクを追加してください。