Блог

Привет всем,

Мне нужно вычислить общее количество строк общее количество строк

На данный момент у меня есть :

Код JS :

     <script>
function calculer(e){

 var i = e.getAttribute('id').length;
 var input_identifier = e.getAttribute('id').substring(i-1,i);
 var subtotal = document.getElementById('subtotal' input_identifier)
 var quantity = e.value;
 var montant = document.getElementById('montant' input_identifier);
 subtotal.textContent = ( parseFloat(quantity) * parseFloat(montant.value)).toFixed(2);
 return;
}
function CalculateTotal(e) {
        var subtotal = querySelectorAll('.subtotal');
        var subtotalCount = subtotal.length;
        var subtotalValue;
        var total = 0;
        for (var i = 0; i < subtotalCount; i  ) {
            subtotalValue = Number(subtotal[i].textContent);
            if (!isNaN(subtotalValue)) total  = subtotal;
        }
        afficherSomme.textContent = total.toFixed(2);
}
</script>
  

На данный момент в вычислении Montant unitaire все в порядке

Но функция calculateTotal не работает

 <div id="contenu">
      <h2>Renseigner ma fiche de frais du mois <?php echo $numMois."-".$numAnnee ?></h2>

      <form method="POST"  action="index.php?uc=gererFraisamp;action=validerMajFraisForfait">
      <div class="corpsForm">

          <fieldset>
            <legend>Eléments forfaitisés</legend>
    <table width=100%>
            <tr>
            <td>Libelle</td>
            <td>Nombre</td>
            <td>Montant unitaire</td>
            <td>Montant total</td>
        </tr>
<?php
            $incr = 1;
            foreach ($lesFraisForfait as $unFrais)
            {
                $idFrais = $unFrais['idfrais'];
                $libelle = $unFrais['libelle'];
                $quantite = $unFrais['quantite'];
                $idfrais = $unFrais['idfrais'];
                if ($idfrais == 'KM') {
                 $montant = $kmMontant;

                  }
        else $montant = $unFrais['montant'];

        ?>
    <tr>
        <td width=20%><?php echo $libelle ?></td>
        <td width=20%><input type="text" id="<?php echo 'idFrais'.$incr; ?>" name="lesFrais[<?php echo $idFrais?>]"  size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>"  onkeyup="calculer(this)">
        <td width=20%><input type="text" id="<?php echo 'montant'.$incr; ?>" value="<?php echo $montant ?>" disabled></td>
        <td id='subtotal<?php echo $incr;?>' width=20%><?php echo $quantite*$montant; ?></td>
    </tr>
        <?php
              $incr   ;
            }
        ?>
    <tr>
        <td colspan="3">Total : </td>
        <td id='afficherSomme' width=20%></td>
    </tr>

        </table>
          </fieldset>
      </div>
      <div class="piedForm">
      <p>
        <input id="ok" type="submit" value="Valider" size="20" />
        <input id="annuler" type="reset" value="Effacer" size="20" />
      </p>
      </div>

      </form>
  

В очереди:

 var subtotal = querySelectorAll('.subtotal');
  

вы используете class селектор .subtotal . Однако вы устанавливаете id промежуточные итоги вместо класса с:

 <td id='subtotal<?php echo $incr;?>
  

Изменение id на class , вероятно, решит вашу проблему.

Я исправил проблемы в вашем коде .. пожалуйста, попробуйте..

 <script>
function calculer(e){

    var i = e.getAttribute('id').length;
    var input_identifier = e.getAttribute('id').substring(i-1,i);
    var subtotal = document.getElementById('subtotal' input_identifier)
    var quantity = e.value;
    var montant = document.getElementById('montant' input_identifier);
    subtotal.textContent = ( parseFloat(quantity) * parseFloat(montant.value)).toFixed(2);

    CalculateTotal(); //<!---- Called your funtion for grand total

}

function CalculateTotal() {
    var subtotal = document.querySelectorAll('.subtotal'); //<--- You missed document.
    var subtotalCount = subtotal.length;
    var subtotalValue;
    var total = 0;
    for (var i = 0; i < subtotalCount; i  ) {
        subtotalValue = Number(subtotal[i].textContent);
        if (!isNaN(subtotalValue)) total  = subtotalValue; //<--- Changed variable here
    }
    afficherSomme.textContent = total.toFixed(2);
}
</script>
  

HTML

 <table width=100%>
    <tr>
        <td>Libelle</td>
        <td>Nombre</td>
        <td>Montant unitaire</td>
        <td>Montant total</td>
    </tr>
    <?php
    $incr = 1;
    $grand_total = 0; //<--- For calculating grand total
    foreach ($lesFraisForfait as $unFrais)
    {
        $idFrais = $unFrais['idfrais'];
        $libelle = $unFrais['libelle'];
        $quantite = $unFrais['quantite'];
        $idfrais = $unFrais['idfrais'];
        if ($idfrais == 'KM') {
            $montant = $kmMontant;
        }
        else $montant = $unFrais['montant'];
    ?>
    <tr>
        <td width=20%><?php echo $libelle ?></td>
        <td width=20%><input type="text" id="<?php echo 'idFrais'.$incr; ?>" name="lesFrais[<?php echo $idFrais?>]"  size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>"  onkeyup="calculer(this)">
        <td width=20%><input type="text" id="<?php echo 'montant'.$incr; ?>" value="<?php echo $montant ?>" disabled></td>
        <td id='subtotal<?php echo $incr;?>' width=20% class="subtotal"><?php echo $quantite*$montant; ?></td> <!--- Added class subtotal -->
    </tr>
    <?php
        $grand_total = $grand_total   ($quantite*$montant); //<--- calcualte grand total
        $incr   ;
    }
    ?>
    <tr>
        <td colspan="3">Total : </td>
        <td id='afficherSomme' width=20%><?php echo $grand_total; ?></td> <!--- printing total  -->
    </tr>

</table>
  

Из того, что я вижу в вашем коде, вы CalculateTotal никуда не звоните. Используйте его в and вашей calculer функции:

 function calculer(e){
...
subtotal.textContent = ( parseFloat(quantity) * parseFloat(montant.value)).toFixed(2);
CalculateTotal();
return;
  

РЕДАКТИРОВАТЬ: как правильно указал Уоррен-Халл, вы используете класс в своем селекторе, но не в своем html-коде. Добавьте класс .subtotal в свой html, и он должен работать нормально:

 <td class="subtotal" id='subtotal<?php echo $incr;?>' width=20%>...