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)