如何用jquery动态显示价格

发布网友 发布时间：2022-04-25 21:36

我来回答

共2个回答

热心网友 时间：2022-04-25 23:05

问题分析：

根据问题描述可以得知，需要的功能为：当表格中的input框（数量）发生改变时，根据单价乘以数量，计算出当前商品的总价并赋值。

然后再计算出所有商品的总价并赋值。

解决方案：

使用jQuery的keyup（鼠标弹起）事件对商品数量的输入行为进行识别。

在keyup事件回调函数中判断设置的当前商品数量是否为数值，如果不是数值则终止继续计算，如果为数值则获取当前商品的数量。

获取当前商品的单价，单价乘以数量，计算出该商品的总价并赋值。

调用计算所有商品总价的自定义函数count。

举例如下：

HTML代码：

<table cellspacing="0" border="0">
    <thead>
        <tr>
            <th width="20%">编号</th>
            <th width="20%">单价</th>
            <th width="40%">数量</th>
            <th width="20%">总价</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1.36</td>
            <td><input type="text"></td>
            <td class="price">0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>5.32</td>
            <td><input type="text"></td>
            <td class="price">0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">商品总价：<span class="count-price"></span>元</td>
        </tr>
    </tfoot>
</table>

CSS代码：

body{
    width: 600px;
    margin: 30px auto 0;
    text-align: center;
}
table{
    width: 100%;
    border-collapse: collapse; 
}
table td, table th{
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
}
tfoot{
    text-align: right;
}
tfoot td{
    padding-right: 40px;
}

jQuery代码：

$('input').keyup(function() {

    //判断当前数量参数是否为数值，如果不是数值则终止计算。
    if (!$.isNumeric($(this).val())) {
        return false;
    }

    var parent = $(this).parents('tr');
    parent.find('.price').html((parent.find('td:eq(1)').html() * $(this).val()).toFixed(2));

    count();
});

//计算全部商品总价
function count(){
    var countPrice = 0;

    $.each($('tbody .price'), function() {
        countPrice += parseFloat($(this).html());
    });

    $('.count-price').html(countPrice.toFixed(2));
}

页面初始化：

输入编号为1的商品数量：

再输入编号为2的商品数量：

总结：

从以上示例结果可以看出，在输入商品数量时，正确计算出该商品的总价并计算出了所有的商品总价。

热心网友 时间：2022-04-26 00:23

看图说话