Javascript 如何在可重复字段容器中动态求和输入值？_Javascript_Jquery_Html

Javascript 如何在可重复字段容器中动态求和输入值？

javascript jquery html

Javascript 如何在可重复字段容器中动态求和输入值？,javascript,jquery,html,Javascript,Jquery,Html,我有以下HTML标记： <div class="rf-row count-container"> <input class="sum-monthly"> <div class="sub-rf-row"> <input class="add-monthly"> </div> <div class="sub-rf-row"> &

我有以下HTML标记：

<div class="rf-row count-container">
    <input class="sum-monthly">
        <div class="sub-rf-row">
            <input class="add-monthly">
        </div>
       <div class="sub-rf-row">
            <input class="add-monthly">
       </div>
       <div class="sub-rf-row template">
            <input class="add-monthly">
       </div>
</div>

我想将每个子rf行（不包括模板子rf行）内的“add monthly”类的所有输入添加到rf行（其父行）内的“sum monthly”中

我想在用户输入之前计算总和值（在document.ready上）。以及在其中一个add每月输入的“keyup”事件中动态更新它

在jQuery中如何才能最好地做到这一点？

这可能会对您的有所帮助

    <!DOCTYPE html>
    <html>
    <head>
      Demo
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>

    <div class="rf-row count-container">
       <input class="sum-monthly">
            <div class="sub-rf-row">
                <input class="add-monthly" value="5">
            </div>
           <div class="sub-rf-row">
                <input class="add-monthly" value="5">
           </div>
           <div class="sub-rf-row template">
                <input class="add-monthly" value="5">
           </div>
    </div>

    <script>
   $(document).ready(function(){
  var value = 0;
    $('.count-container .sub-rf-row').each(function(){
      value += parseInt($(this).find('.add-monthly').val()) ? parseInt($(this).find('.add-monthly').val()) : 0
    })
   $('.sum-monthly').val(value);
});

    </script>
    </body>
    </html>


演示
$（文档）.ready（函数（）{
var值=0；
$（'.count container.sub rf row'）。每个（函数（）{
value+=parseInt（$（this）.find（'.add monthly'）.val（））？parseInt（$（this）.find（'.add monthly'）.val（））：0
})
美元（“.sum monthly”）.val（值）；
});

你可以这样做

 $(document).ready(function()
 {

   updateValues()
   $('.sub-rf-row').keyup(updateValues); 

  });


function updateValues()
{
   var sum=0;
   $('.sub-rf-row:not(.template) input').each(function(){

     sum+=parseInt($(this).val()=='' ? 0 : $(this).val());
   });


    $('.sum-monthly').val(sum);
  }

为了实现您的目标，您需要引用所需的

输入

字段，迭代它们并计算它们的总和，最后将该总和放入

字段。添加每月的字段。但是您需要注意某些字段中可能存在的非数值，因此，在下面的sumUpdate
函数中，我仅在该值为有效数字的情况下，才将input
字段的值添加到总和中，也允许使用十进制数
下面是一个片段来说明所说的一切：

$（函数（）{
var sumInput=$（'.rf行输入.sum monthly'），
/*sumInput变量是显示其他输入总和的输入字段*/
输入=$（'.子rf行：非（.template）输入。每月添加'；
/*inputs变量是一个数组，包含类为“.add monthly”的输入字段，这些字段位于没有“.template”类的“.sub rf row”元素下*/
//加载文档后，直接调用updateSum函数计算总和。
updateSum（）；
//将KeyUp事件侦听器添加到输入
输入。on（'keyup'，updateSum）；
//updateSum函数的实现，该函数将计算输入字段的总和。
函数updateSum（）{
总和=0；
输入。每个（函数（）{
var val=+$（this）.val（）；//注意$（this）.val（）前面的加号。如果我们将输入值强制转换为整数，则如果无法将输入值强制转换为输入值（换句话说，如果输入值包含非数字字符），则val变量可以包含NaN的值。这样，我们还可以使用十进制数。
sum+=（val.toString（）！='NaN'）？val:0；//我们只添加有效的数字，否则我们将向sum变量添加0。
   });
sumInput.val（sum.toFixed（2）.replace（'.00'，''）；//将sum变量的值赋给sumInput，只允许精度为2位小数，如果sum变量包含自然数，也可以从中去掉'.00'（如2.00=>2，10.00=>10，但任何小数都将保持不变：2.8=>2.80，12.97=>12.97）。
}
});

           
           
向我们展示您迄今为止所做的尝试。这将包括模板类的输入。我添加了一些标签以使其更清楚：如何使用keyup使此小提琴动态？好的，我几乎让它工作了，除了一件事：当我删除一行时，我希望每月的总和反映这一点。但是，删除行中的值不会从每月总和中减去。下面是我当前的fiddle:@RobertStrong您使用什么事件删除行？DOMNodeRemoved@RobertStrong只是将updateValues（）放在节点删除逻辑的末尾，您可以在fiddle链接中发布节点删除逻辑吗。