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"，并将您的行总数更改为 class="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屋！