jQuery的：如何对表中的每一行的价格求和

Question

So I want to sum each row with JQuery. But my code worked only with one row.

When I put new item in new row, the JQuery didn't work.

This is my 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>

This is my JQuery code:

<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>

Can someone tell me how to use each() function in my script ? So I can sum each row in table.

Thank you.

https://jsfiddle.net/neuugkak/

Answer 1

ID is the unique in your HTML structure. If things are getting repeat, always add classes and based on classes do process.

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

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

Changed in 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 ")
        });*/
    });

Update:

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

Answer 2

If you're talking about id with total name, then you need to change the id into class definition. Cause, id must be unique, and if more than one element having same id name, then only first matched element only returned, unless you catch it up using id selector, try this :

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

Js

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

Answer 3

<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>