Javascript JQuery：如何计算表中每行的价格总和_Javascript_Jquery

Javascript JQuery：如何计算表中每行的价格总和

javascript jquery

Javascript JQuery：如何计算表中每行的价格总和,javascript,jquery,Javascript,Jquery,所以我想用JQuery对每一行求和。但我的代码只对一行起作用当我将新项放入新行时，JQuery不起作用这是我的HTML： <table class="table cart"> <thead> <tr> <th class="cart-product-remove"> </th> <th class="ca

所以我想用JQuery对每一行求和。但我的代码只对一行起作用

当我将新项放入新行时，JQuery不起作用

这是我的HTML：

<table class="table cart">
        <thead>
            <tr>
                <th class="cart-product-remove">&nbsp;</th>
                <th class="cart-product-thumbnail">&nbsp;</th>
                <th class="cart-product-name">Product</th>
                <th class="cart-product-price">Unit Price</th>
                <th class="cart-product-quantity">Quantity</th>
                <th class="cart-product-subtotal">Total</th>
            </tr>
    </thead>
    <tbody>
            <tr class="cart_item">
                <td class="cart-product-remove">
                    <a href="#" class="remove" title="Remove this item"><i class="icon-trash2"></i></a>
                </td>

                <td class="cart-product-thumbnail">
                    <a href="#"><img width="64" height="64" src="images/shop/thumbs/small/dress-3.jpg" alt="Pink Printed Dress"></a>
                </td>

                <td class="cart-product-name">
                    <a href="#">Pink Printed Dress</a>
                </td>

                <td class="cart-product-price">
                    Rp <span id="price" class="amount">50000</span>
                </td>

                <td class="cart-product-quantity">
                    <div class="quantity clearfix">
                        <input type="button" value="-" class="minus" field="quantity">
                        <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                        <input type="button" value="+" class="plus" field="quantity">
                    </div>
                </td>

                <td class="cart-product-subtotal">
                    <span id="total" class="amount"></span>
                </td>
            </tr>
     </tbody>
</table>


产品
单价
量
全部的
50000卢比

这是我的JQuery代码：

<script type="text/javascript">

        function calculate(){
            var price = parseFloat($('#price').text()) || 0;
            var quantity = parseInt($('#quantity').val());
            var total = price * quantity;
            $('#total').text(total);
        }

        function changeQuantity(num){
            $("#quantity").val( parseInt($("#quantity").val())+num);
        }

        $().ready(function(){
            calculate();
            $(".minus").click(function(){
                changeQuantity(-1);
                calculate();
            });
            $(".plus").click(function(){
                changeQuantity(1);
                calculate();
            });

            $("#quantity").keyup(function(e){
                if (e.keyCode == 38) changeQuantity(1);
                if (e.keyCode == 40) changeQuantity(-1);
                calculate();
            });

            var quantity = document.getElementById("quantity");
            quantity.addEventListener("input", function(e) {
                calculate();
            });

            $('#total').each(function() {
                $(this).before("Rp ")
            });
        });

    </script>


函数计算（）{
var price=parseFloat（$（'#price'）.text（））| 0；
var quantity=parseInt（$（'#quantity'）.val（）；
var总额=价格*数量；
$（'总计'）.text（总计）；
}
函数更改数量（num）{
$（“#数量”）.val（parseInt（$（“#数量”）.val（））+num）；
}
$（）.ready（函数（））{
计算（）；
$（“.减号”）。单击（函数（）{
变更数量（-1）；
计算（）；
});
$（“.plus”）。单击（函数（）{
变更数量（1）；
计算（）；
});
$（“#数量”）.keyup（函数（e）{
如果（e.keyCode==38）变更数量（1）；
如果（e.keyCode==40）变更数量（-1）；
计算（）；
});
var数量=document.getElementById（“数量”）；
数量。addEventListener（“输入”，函数（e）{
计算（）；
});
$（'#total'）。每个（函数（）{
美元（本）。之前（“Rp”）
});
});

有人能告诉我如何在脚本中使用

each（）

函数吗？所以我可以对表中的每一行求和

多谢各位

如果您谈论的是具有全名的id，那么您需要将id更改为类定义。原因，id必须是唯一的，如果有多个元素具有相同的id名称，则仅返回第一个匹配的元素，除非您使用id选择器找到它，否则请尝试以下操作：

<span class="amount total"></span>

<span class="amount total"></span>

ID是HTML结构中唯一的。如果事情变得重复，总是添加类并基于类执行过程

更新：

function changeQuantity(num,obj){
            //$("#quantity").val( parseInt($("#quantity").val())+num);
            var value_to_set = parseInt($(obj).parent().find('.qty').val())+num;
            if(value_to_set<=0){$(obj).parent().find('.qty').val(1);return;}
            $(obj).parent().find('.qty').val( value_to_set);
        }

函数更改数量（num，obj）{
//$（“#数量”）.val（parseInt（$（“#数量”）.val（））+num）；
var value_to_set=parseInt（$（obj）.parent（）.find（'.qty'）.val（））+num；
if（value_to_setID是HTML结构中唯一的。如果事情变得重复，请始终添加类并基于类进行处理

更新：
function changeQuantity(num,obj){
            //$("#quantity").val( parseInt($("#quantity").val())+num);
            var value_to_set = parseInt($(obj).parent().find('.qty').val())+num;
            if(value_to_set<=0){$(obj).parent().find('.qty').val(1);return;}
            $(obj).parent().find('.qty').val( value_to_set);
        }

函数更改数量（num，obj）{
//$（“#数量”）.val（parseInt（$（“#数量”）.val（））+num）；
var value_to_set=parseInt（$（obj）.parent（）.find（'.qty'）.val（））+num；
如果（设置值<代码>
.主动{
颜色：红色；
}
函数计算（IN_ObjRow）{
var price=parseInt（$（IN_ObjRow）.find（'td:eq（3））.find（'.price'）.text（），10）
var quantity=parseInt（$（IN_ObjRow）.find（'td:eq（4））.find（'input.quantity'）.val（），10）；
var总额=价格*数量；
$（IN_ObjRow.find（'td:eq（5））.find（'.total'）.text（total）；
}
函数更改数量（num）{
$（“#数量”）.val（parseInt（$（“#数量”）.val（））+num）；
}
$（文档）.ready（函数（）{
$（'#AddRow'）。单击（函数（）{
var objRow=$（'.cart tbody tr:first'）.clone（）；
$（'.cart tbody'）.append（objRow）
});
计算（$（'.cart tbody tr:first'））；
$（文档）.on（'单击'，'减号'）函数（）{
$（this）.next（'.quantity'）.val（parseInt（$（this）.next（'.quantity'）.val（），10）-1）
计算（$（this.closest（'tr'））；
});
$（文档）.on（'单击'，'.plus'，函数（）{
$（this.prev（'.quantity'）.val（parseInt（$（this.prev（'.quantity'）.val（），10）+1）
计算（$（this.closest（'tr'））；
});
$（“.quantity”）.keyup（函数（e）{
如果（e.keyCode==38）$（this）.closest（'.quantity'）.val（$（this）.closest（'.quantity'）.val（）+1）
如果（e.keyCode==40）$（this）.closest（'.quantity'）.val（$（this）.closest（'.quantity'）.val（）-1）
计算（$（this.closest（'tr'））；
});
//var数量=document.getElementById（“数量”）；
//数量。addEventListener（“输入”，函数（e）{
//计算（$（this.closest（'tr'））；
//});
$（文档）.on（'change'，'quantity'，函数（）{
计算（$（this.closest（'tr'））；
});
$（'.total'）。每个（函数（）{
美元（本）。之前（“Rp”）
});
});
产品
单价
量
全部的
50000卢比
function calculate(obj){
        /* var price = parseFloat($('#price').text()) || 0;
           var quantity = parseInt($('#quantity').val());
           var total = price * quantity;
           $('#total').text(total);*/

        var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
        var quantity = parseInt($(obj).parent().find('.qty').val());
        var total = price * quantity;

       $(obj).parent().parent().parent().find('.total_amount').text(total);;
    }

    function changeQuantity(num,obj){
        //$("#quantity").val( parseInt($("#quantity").val())+num);
        $(obj).parent().find('.qty').val( parseInt($(obj).parent().find('.qty').val())+num);
    }

    $().ready(function(){
        //calculate();
        $(".minus").click(function(){
            changeQuantity(-1,this);
            calculate(this);
        });
        $(".plus").click(function(){
            changeQuantity(1,this);
            calculate(this);
        });

        //$("#quantity").keyup(function(e){
            $(".qty").keyup(function(e){
            if (e.keyCode == 38) changeQuantity(1,this);
            if (e.keyCode == 40) changeQuantity(-1,this);
            calculate(this);
        });

        /*var quantity = document.getElementById("quantity");
        quantity.addEventListener("input", function(e) {
            calculate();
        });

        $('#total').each(function() {
            $(this).before("Rp ")
        });*/
    });

function changeQuantity(num,obj){
            //$("#quantity").val( parseInt($("#quantity").val())+num);
            var value_to_set = parseInt($(obj).parent().find('.qty').val())+num;
            if(value_to_set<=0){$(obj).parent().find('.qty').val(1);return;}
            $(obj).parent().find('.qty').val( value_to_set);
        }

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <style>

            .active {
                color:red;
            }
        </style>
    <script>


        function calculate(IN_ObjRow) {

            var price = parseInt($(IN_ObjRow).find('td:eq(3)').find('.price').text(),10)
            var quantity = parseInt($(IN_ObjRow).find('td:eq(4)').find('input.quantity').val(),10);
            var total = price * quantity;
            $(IN_ObjRow).find('td:eq(5)').find('.total').text(total);
        }

        function changeQuantity(num) {
            $("#quantity").val(parseInt($("#quantity").val()) + num);
        }



        $(document).ready(function () {
           $('#AddRow').click(function () {
               var objRow = $('.cart tbody tr:first').clone();
               $('.cart tbody').append(objRow)
           });

           calculate($('.cart tbody tr:first'));

           $(document).on('click','.minus',function () {
                $(this).next('.quantity').val(parseInt($(this).next('.quantity').val(),10) -1)
                calculate($(this).closest('tr'));
            });
           $(document).on('click', '.plus', function () {
                $(this).prev('.quantity').val(parseInt($(this).prev('.quantity').val(),10) + 1)
                calculate($(this).closest('tr'));
            });

            $(".quantity").keyup(function (e) {
                if (e.keyCode == 38) $(this).closest('.quantity').val($(this).closest('.quantity').val() + 1)
                if (e.keyCode == 40) $(this).closest('.quantity').val($(this).closest('.quantity').val() - 1)
                calculate($(this).closest('tr'));
            });

            //var quantity = document.getElementById("quantity");
            //quantity.addEventListener("input", function (e) {
            //    calculate($(this).closest('tr'));
            //});

            $(document).on('change', '.quantity', function () {
                calculate($(this).closest('tr'));

            });

            $('.total').each(function () {
                $(this).before("Rp ")
            });

        });
    </script>
    </head>

    <body>
        <input type="button" id="AddRow" value="Add Row" />
      <table class="table cart">
        <thead>
            <tr>
                <th class="cart-product-remove">&nbsp;</th>
                <th class="cart-product-thumbnail">&nbsp;</th>
                <th class="cart-product-name">Product</th>
                <th class="cart-product-price">Unit Price</th>
                <th class="cart-product-quantity">Quantity</th>
                <th class="cart-product-subtotal">Total</th>
            </tr>
    </thead>
    <tbody>
            <tr class="cart_item">
                <td class="cart-product-remove">
                    <a href="#" class="remove" title="Remove this item"><i class="icon-trash2"></i></a>
                </td>

                <td class="cart-product-thumbnail">
                    <a href="#"><img width="64" height="64" src="images/shop/thumbs/small/dress-3.jpg" alt="Pink Printed Dress"></a>
                </td>

                <td class="cart-product-name">
                    <a href="#">Pink Printed Dress</a>
                </td>

                <td class="cart-product-price">
                    Rp <span class="amount price">50000</span>
                </td>

                <td class="cart-product-quantity">
                    <div class="quantity clearfix">
                        <input type="button" value="-" class="minus" field="quantity">
                        <input type="text" class="quantity" name="quantity" value="1" class="qty" />
                        <input type="button" value="+" class="plus" field="quantity">
                    </div>
                </td>

                <td class="cart-product-subtotal">
                    <span class="amount total"></span>
                </td>
            </tr>
     </tbody>
</table>
    </body>

    </html>