JQuery乘以表行的输入值

时间:2012-08-03 05:17:34

标签: javascript jquery model-view-controller jquery-selectors

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

enter image description here

2 个答案:

答案 0 :(得分:8)

您的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/

答案 1 :(得分:1)

让我们在表格中添加一个班级in

首先将更改事件添加到表的所有输入中。在更改输入字段时,将相同行的所有输入相乘并更新multTotalgrandTotal

$(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)