1

我想通过将单个行的输入相乘来计算每一行的总价格，然后最后通过使用 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> 
    }

在此处输入图像描述

4

2 回答 2

8

您的 html 无效：该id属性应该是唯一的，但您在每一行中重复相同的三个 id。解决此问题的最简单方法是将输入更改为 haveclass="val1"和class="val2"而不是id="val1"and `id="val2"，并将行总数更改为 have 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/

于 2012-08-03T05:29:02.213 回答
1

让我们在表中添加一个类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)
于 2012-08-03T05:55:52.387 回答