javascript - jQuery : how to sum price each row in table

Question

所以我想用 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>

这是我的 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>

有人可以告诉我如何在脚本中使用 each() 函数吗？这样我就可以对表中的每一行求和。

谢谢。

https://jsfiddle.net/neuugkak/

Answer 1

ID 在 HTML 结构中是唯一的。如果事情重复，请始终添加类并基于类进行处理。

https://jsfiddle.net/1xsc2wfb/4/

<span id="total" class="total_amount"></span>

已在 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="total_amount"></span>
            </td>
        </tr>
         <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="#">Other Dress</a>
            </td>

            <td class="cart-product-price">
                Rp <span id="price" class="amount">40000</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="total_amount"></span>
            </td>
        </tr>
 </tbody>

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);
        }