乘以和添加 2 个输入 jQuery

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.