动态标签

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”的总数。

例如：

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

Answer 1

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

查询所有这些元素

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

并将生成的数组（在jQuery中为jQuery对象，如数组）存储到变量中。然后将事件添加到数量输入字段并调用一个函数，该函数将迭代先前存储的数组中的所有元素，并转换存储在其中的文本（使用您的calculer函数生成），可以使用

subtotal[index].innerText

并使用

将其解析为Number

Number(subtotal[index].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.
}

在calculer功能结束时调用上述功能。