JQuery乘以表行的输入值

我想通过将各行的输入相乘来计算每一行的总价，然后通过使用JQuery添加Total列的所有总值来计算总计。 当我输入值时，我只获得显示总计的第一行。 任何帮助将不胜感激。

  $(document).ready(function () { $(".txtMult").each(function () { $(this).keyup(function () { multInputs(); }); }); }); function multInputs() { var mult = 0; $(".txtMult").each(function () { var $val1 = $('#val1').val(); var $val2 = $('#val2').val(); var $total = ($val1 * 1) * ($val2 * 1) $('#multTotal').text($total); }); }  @using (@Html.BeginForm()) {  @for (int i=0; i < 5; i++) {  } 
 
 
 Quanity 
 
 Unit Price 
 
 Total 
 
 
  
 
  
 
 0.00 
 
 
 Grand Total# 0.00 
 
 
 } 

Answer 1

您的html无效： id属性应该是唯一的，但您在每一行中重复相同的三个ID。 解决此问题的最简单方法是将输入更改为class="val1"和class="val2"而不是id="val1"和`id="val2" ，并将行总数更改为class="multTotal" 。 我还将txtMult类移动到每个带有输入的tr元素中，以便于选择这些行：

          0.00   

…然后更改jQuery代码中的选择器，以便在当前行的上下文中按类选择。 另请注意，您不需要.each()循环将.keyup()处理程序绑定到与您的选择器匹配的元素，只需使用$("someselector").keyup() ：

  $(document).ready(function () { $(".txtMult input").keyup(multInputs); function multInputs() { var mult = 0; // for each row: $("tr.txtMult").each(function () { // get the values from this row: var $val1 = $('.val1', this).val(); var $val2 = $('.val2', this).val(); var $total = ($val1 * 1) * ($val2 * 1); // set total for the row $('.multTotal', this).text($total); mult += $total; }); $("#grandTotal").text(mult); } }); 

工作演示： http ： //jsfiddle.net/nnnnnn/5FpWC/

Answer 2

让我们在表中添加一个类。

首先将更改事件添加到表的所有输入。 在更改输入字段时，将相同行的所有输入相乘并更新multTotal和grandTotal

 $(function(){ $('.in input').change(function(){ var p=$(this).parent().parent() //get the parent of changed input var m=p.find('input.txtMult') //find all input of the row var mul=parseFloat($(m[0]).val()*$(m[1]).val()).toFixed(2) //multiply them var res=p.find('.multTotal') // get corresponding multTotal res.html(mul); //show the result var total=0; $('.in .multTotal').each(function(){ total+=parseFloat($(this).html()) }) //calculate grand total $('.in #grandTotal').html(parseFloat(total).toFixed(2)) //show grand total }); }) 

在jsfiddle检查一下

如果需要处理超过2个字段的更改

 var mul=parseFloat($(m[0]).val()*$(m[1]).val()).toFixed(2) //multiply them 

至

 var mul=1; $(m).each(function(){ mul*=$(this).val() }) mul=parseFloat(mul).toFixed(2)