Question

我感觉有点愚蠢，但我无法让它发挥作用。我想将两个输入相乘，然后添加所有总数以获得总计，但它不起作用，我无法弄清楚为什么。我一直在关注这个主题的几个主题，如this one，但我看不出我做错了什么。

$(document).ready(function(){
    $('.qtyorder').on("keyup change",function(){
        update_amounts();
    });
});

function update_amounts(){
    var sum = 0.00;
    $('#ordertable > tbody  > tr').each(function(){
        var price = $(this).find('.unitprice').val();
        var qty = $(this).find('.qtyorder').val();
        var amount = (qty * price)
        sum+=amount;
        $(this).find('.subtotal').text('' + amount);
    });
    $('.ordertotal').text(sum);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="order-table" id="ordertable">
    <thead>
        <tr>
            <th class="order-name"></th>
            <th class="order-price">Prix</th>
            <th class="order-qtytotal">Qty</th>
            <th class="order-total">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="order-name"><h2>Product1</h2></td>
            <td class="order-price">
                <input type="text" name="unitprice" class="unitprice" value="30" readonly="readonly" tabindex="-1">
            </td>
            <td class="order-qtytotal">
                <input type="number" class="qtyorder" name="qtyorder" min="0">
            </td>
            <td class="order-total">
                <input type="text" class="subtotal" name="subtotal" readonly="readonly" tabindex="-1" value="0.00">
            </td>
        </tr>
        <tr>
            <td class="order-name"><h2>Product2</h2></td>
            <td class="order-price">
                <input type="text" name="unitprice" class="unitprice" value="40" readonly="readonly" tabindex="-1">
            </td>
            <td class="order-qtytotal">
                <input type="number" class="qtyorder" name="qtyorder" min="0">
            </td>
            <td class="order-total">
                <input type="text" class="subtotal" name="subtotal" readonly="readonly" tabindex="-1" value="0.00">
            </td>
        </tr>
    </tbody>
</table>
<div class="sommeorder">
    <label for="ordertotal">Total</label>
    <input type="text" class="ordertotal" name="ordertotal" readonly="readonly" tabindex="-1" value="0.00">
</div>

Answer 1

有几件事。

首先，您正在使用<input>代码，因此您可以使用val()代替text()。这将使您的价值显示出来。

$(this).find('.subtotal').val(amount);

其次，为了确保您获得数字而不是字符串，您可以将值包装在parseFloat()中。这将允许您使用数字。

var price = parseFloat($(this).find('.unitprice').val());
var qty = parseFloat($(this).find('.qtyorder').val());

第三，出于某种原因，sum += amount没有正确添加。如果您将其更改为sum = sum + amount，则会有效。

以下是它工作时的样子：

function update_amounts(){
    var sum = 0.0;
    $('#ordertable > tbody  > tr').each(function(){
        var price = parseFloat($(this).find('.unitprice').val());
        var qty = parseFloat($(this).find('.qtyorder').val());
        var amount = (qty * price)

        if (amount > 0) {
            $(this).find('.subtotal').val(amount);
            sum = sum + amount;
        } else {
            $(this).find('.subtotal').val("0.00");
        }
    });

    if (sum > 0) $('.ordertotal').val(sum);
    else $('.ordertotal').val("0.00");
}

Here's a JSFiddle of it working.

乘以并添加2个输入jQuery

1 个答案: