jQuery动态计算php循环中每行的每个subTotal

时间:2017-08-03 08:23:00

标签: javascript php jquery

没有什么工作正常。我希望subTotal字段在我更改数量时显示计算的金额。我对网络开发和编程比较陌生。提前谢谢。

HTML

    <tr>
     <td><input id="quantity" type="text" name="name" value="<?php echo $row['name'] ?>" readonly="readonly"></td>
     <td><input id="quantity-sm" type="text" name="price" class="price" value="<?php echo $row['price'] ?>" ></td>
     <td>
        <input type="button" value="-" class="qtyminus" field="quantity">
        <input type="submit" name="quantity" class="quantity" value="0" class="qty">
        <input type="button" value="+" class="qtyplus" field="quantity">
    </td>

    <td><input   id="quantity-sm" type="text" class="subTotal" name="subTotal" ></td></td>
    </tr>
    <?php endwhile; ?>
<tfoot>
    <tr><td colspan="2"></td><td align="right"><span id="total" class="total"></span> </td></tr>
</tfoot>

JQuery的

$(document).ready(function(){

update_amounts();
$('.qty').change(function() {
    update_amounts();
});

});

function update_amounts()
{
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function() {
        var qty = $(this).find('.quantity').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        sum+=amount;
        $(this).find('.subTotal').text(''+amount);
    });

    $('.total').text(sum);
}

2 个答案:

答案 0 :(得分:0)

你放了

$('.qty').change(function() {
    calculate();
});

进入$(document).ready()回调? 这可以确保DOM准备就绪。

请参阅 https://learn.jquery.com/using-jquery-core/document-ready/

答案 1 :(得分:0)

只有当用户与文本输入进行交互并手动更改其值时,

.change()才会消失。

您需要做的是将click事件绑定到加号/减号按钮,然后调用更新数量的代码。

我假设加/减按钮已经正常工作(他们已经在改变qty字段的值)

$('.qtyplus, .qtyminus').click(function() {
    update_amounts();
});