Question

我坚持计算每一行的价格。如果我选择数量字段，它将为两行打印相同的价格。

这是我的演示 https://jsfiddle.net/keyro/fw8t3ehs/2/

提前谢谢。

HTML

<table class="table table-condensed table-hover" id="myTable">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th class="text-center">Quantity</th>
                        <th class="text-right">Price ($)</th>
                    </tr>
                </thead>
                <tbody class="body">
                    <tr data-id="1" data-price="20.00">
                        <td>Apple ($20)</td>
                        <td><select class="form-control product_quantities" name="product_quantities[]">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select></td>
                        <td class="text-right amount" name="amount[]">0</td>
                    </tr>
                    <tr data-id="2" data-price="15.00">
                        <td>Banana ($15)</td>
                        <td><select class="form-control product_quantities" name="product_quantities[]">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select></td>
                        <td class="text-right amount" name="amount[]">0</td>
                    </tr>
                    <tr>
                        <td class="text-right bold">TOTAL</td>
                        <td class="text-center bold">1</td>
                        <td class="text-right bold"><b class="total">0</b></td>
                    </tr>
                </tbody>
            </table>

的Javascript

        function totalamount() {
        var q = 0;

        var rows = document.getElementById('myTable').getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;

        for( var i = 0; i < rows; i++ ){
            var z = $('.amount').html();
            q +=z;
        }
        $('.total').html(z);
    }

    $(function () {
        $('.body').delegate('.product_quantities','change',function(){
            var tr = $(this).parent().parent();
            var qty = tr.find('.product_quantities option:selected').attr('value');
            var price = tr.data('price');

            var total = (price * qty);
            $('.amount').html(total);
            totalamount()
        });
    });

Answer 1

不确定这是否是您想要的结果。但我已经使代码正确地将两个金额列相加。

刚刚将totalamount函数的底部更改为：

for( var i = 0; i < rows; i++ ){
    var z = $('.amount:eq(' + i + ')').html();

    if (!isNaN(z)) {
        q +=Number(z);
    }
}

$('.total').html(q);

正如@mrEthol正确指出的那样，这也应该修复：

$('.amount').html(total);

到

tr.find('.amount').html(total);

因此两种计算都有效。

Demo

Answer 2

$('.amount').html(total);

更改为：

tr.find('.amount').html(total);

Answer 3

循环遍历每个表数组并查找值，并仅使用$(v).find('.amount').text(amt);添加到该行数量。我想这会对你有帮助。

    function totalamount() {
        var q = 0;


        $('.body tr').each(function(index, v){
            var cost = Number($(v).data('price'));
          var qty = Number($(v).find('.product_quantities').val());
          if(!isNaN(cost) && !isNaN(qty)){
          var amt = Number(cost*qty);

          $(v).find('.amount').text(amt);

          q = q + amt
          console.log(qty, cost, q);}
        })
        $('.total').text(q);


    }

    $(function () {
        $('.body').delegate('.product_quantities','change',function(){

            totalamount()
        });
    });

<强> JSFIDDLE

计算每一行的价格

3 个答案: