动态选项卡中的 Javascript 计算总计

Question

我有短路问题。

在我的表单中，我有多重输入，并且用户可以更改值。

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

  <form method="POST"  action="index.php?uc=gererFrais&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>

    ?>
<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="30" 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></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>

我想添加一行，其中已执行 col“Montant Total”的总计。

示例:

并且计算已经直接执行，没有刷新。

Answer 1

首先，不要使用 ID 进行小计，而是使用 Class - subtotal。然后您所要做的就是使用

查询所有这些元素

querySelectorAll('.subtotal') 或 $('.subtotal')

并将结果数组(在 jQuery 中是类似数组的 jQuery 对象)存储到变量中。然后将事件添加到数量输入字段并调用一个函数，该函数将迭代先前存储的数组中的所有元素并转换存储在其中的文本(使用您的计算器函数生成)，该函数可以使用

访问

小计[索引].innerText

并使用

将其解析为 Number

数字(小计[索引].innerText)

并检查结果数字是否为NaN(不是数字)或不使用isNaN()函数。如果没有添加到本地 total 变量并将结果写入最后。

希望这有帮助。

这是代码 -

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;
        }
        // Set the total element's textContent here.
}

在计算器函数末尾调用上述函数。