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结构中的唯一ID。如果事情变得重复，总是添加类，并根据类进行处理。

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

Answer 2

如果您正在谈论带有总名称的id，那么您需要将id更改为类定义。原因，id必须是唯一的，如果多个元素具有相同的id名称，那么只返回第一个匹配的元素，除非你使用id选择器捕获它，试试这个：

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

JQuery：如何对表

3 个答案: