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。它是如何工作的？

＆＃13;

<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>

＆＃13;

更新：在每行的总输入中添加了updateTotal函数和js-total类。您可以通过运行updateTotal(25)来更新总计。你可以将25改为你想要的价格。

这可以设置＆＃34;％-off＆＃34;通过选择另一个元素。如果您想这样做，请提出另一个问题并在此处添加链接。

所有输入的总和

1 个答案: