javascript - 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() 处理程序绑定(bind)到与您的选择器匹配的元素，只需使用 $ ("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/