JQuery乘以表行的输入值 [英] JQuery multiply input values of table rows

问题描述

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

I want to calculate each row's total price by multiplying individual row's inputs and then finally calculate a grand total by adding all the total values of the Total column using JQuery. I am only getting the first row to display total when I enter values. Any help will be greatly appreciated.

     <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> 
    }

推荐答案

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

Your html is invalid: the id attribute is supposed to be unique but you are repeating the same three ids in every row. The easiest way to fix this is to change your inputs to have class="val1" and class="val2" instead of id="val1" and `id="val2", and change your row total to have class="multTotal". I'd also move the txtMult class to each of the tr elements with the inputs in them, for ease of selecting those rows:

        <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（）：

...and then change the selector in your jQuery code to select by class in the context of the current row. Note also that you don't need an .each() loop to bind the .keyup() handlers to the elements that match your selector, just use $("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/

这篇关于JQuery乘以表行的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！