使用JS / jQuery从表单字段中获取值的总和

时间:2012-07-12 14:29:57

标签: javascript jquery html

我有动态表格,如:

<form id="formaa">
<div class="row">
  <input type="text" name="item" class="item"></input>
  <input type="text" name="quant" class="quant"></input>
  <input type="text" name="price" class="price" onkeyup="update();"></input>
  <input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>
<div class="row">
  <input type="text" name="item" class="item"></input>
  <input type="text" name="quant" class="quant"></input>
  <input type="text" name="price" class="price" onkeyup="update();"></input>
  <input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>    
<!-- ... many more rows -->
<input type="text" disabled id="total" name="tot"></input>
</form>

我要做的是将项目数量和价格相乘,并分别得出每个项目的总和字段总和(不是所有项目总和)。

我已经实现的是这个功能,但它似乎不是单独计算所有项目的总和,而是使用第一个默认字段行,当我添加新的字段集并用信息填充它们时,字段(和其他后来添加)总和值变为NaN ..如果我删除所有添加的字段集并保留第一个表单fows设置,数字再次工作..这里有什么问题?

<script type="text/javascript">
function update() {
  var total = 0;
  $("#formaa div.row").each(function(i,o){
    total += $(o).find(".quant").val() *
        $(o).find(".price").val();
         if(!isNaN(total) && total.length!=0) {
                sum += parseFloat(total);
            }
  });
  $("#formaa div.row #suma").val(total);
}
</script>

1 个答案:

答案 0 :(得分:4)

function update() {
  $("#formaa div.row").each(function(i,o){
     var total = $(o).find(".quant").val() * $(o).find(".price").val();
     if(!isNaN(total) && total.length!=0) {
         sum += parseFloat(total);
     }
     $(o).find('[name="sum"]').val(total);
  });
}

代码中的一些问题:

  • 永远不会向多个元素提供相同的ID。这就是我在名字
  • 上定义选择器的原因
  • 你没有重置总数,所以这是所有
  • 的总和
  • 我没有解决这个问题,但在浮点解析之前你的操作很奇怪(可能取决于我看不到的内容)