JQuery乘以表格行的输入值

Question

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

 <script type="text/C#" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(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); 
       }); 
      } 

    </script> 
    @using (@Html.BeginForm()) 
    { 
     <table> 
     <tr> 
      <th> 
       Quanity 
      </th> 
      <th> 
       Unit Price 
      </th> 
      <th> 
       Total 
      </th> 
     </tr> 
     @for (int i=0; i < 5; i++) 
     { 

      <tr> 
       <td> 
        <input class ="txtMult" name="txtEmmail" id="val1" /> 
       </td> 
       <td> 
        <input class ="txtMult" name="txtEmmail" id="val2"/> 
       </td> 
       <td> 
        <span id="multTotal">0.00</span> 
       </td> 
      </tr> 

    } 
<tr> 
    <td colspan="3" align="right"> 
     Grand Total# <span id="grandTotal">0.00</span> 
    </td> 
</tr> 
    </table> 
    } 

Answer 1

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

 <tr class="txtMult"> 
      <td> 
       <input name="txtEmmail" class="val1" /> 
      </td> 
      <td> 
       <input name="txtEmmail" class="val2"/> 
      </td> 
      <td> 
       <span class="multTotal">0.00</span> 
      </td> 
     </tr> 

...然后在你的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

让我们添加一个类in到表。

首先向表格的所有输入添加一个更改事件。在输入栏的变化乘以同一行的所有输入和更新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)