自动计算jquery微调器的值

时间:2015-02-24 10:06:35

标签: javascript jquery

实际上如何根据js微调器的变化自动计算小计,也用jquery将它们加总为总计,我是新的带有操作函数的jquery所以任何建议都会受到赞赏

由于

热烈

小提琴>>

<div class="table-responsive" id="bottom-table">
<table class="table table-striped">
    <thead>
        <tr>
            <th>No</th>
            <th>Part Number</th>
            <th>Desc</th>
            <th>Qty / Unit</th>
            <th>Qty Needed</th>
            <th>Het ( Rp )</th>
            <th>Estimation Price</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>3DCam01</td>
            <td>3D Camera</td>
            <td>1</td>
            <td><input class="spinner" value="1" readonly="readonly"></td>
            <td>$1500.00</td>
            <td><p class="subtotal"></p>Subtotal</td>
            <td><a href="index.php?action=remove&code=3DCam01" class="btnRemoveAction">Delete</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>USB02</td>
            <td>External Hard Drive</td>
            <td>1</td>
            <td><input class="spinner" value="1" readonly="readonly"></td>
            <td>$800.00</td>
            <td>Subtotal</td>
            <td><a href="index.php?action=remove&code=USB02" class="btnRemoveAction">Delete</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>wristWear03</td>
            <td>Wrist Watch</td>
            <td>1</td>
            <td><input class="spinner" value="1" readonly="readonly"></td>
            <td>$300.00</td>
            <td>Subtotal</td>
            <td><a href="index.php?action=remove&code=wristWear03" class="btnRemoveAction">Delete</a></td>
        </tr>                            
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Total</td>
            <td>Total Amount</td>
            <td><a href="index.php?action=remove&code=wristWear03" class="btnRemoveAction">Delete</a></td>
        </tr>                        
    </tbody>
</table>
</div>

由于

热烈

1 个答案:

答案 0 :(得分:0)

您需要绑定到spin事件以获取输入的值,然后相应地更新DOM

function quantity(price, multiplier) {
    if (multiplier === 1) {
        return '$' + price.toFixed(2);
    }

    return '$' + (price * multiplier).toFixed(2);
}

$( ".spinner" ).spinner({
    min: 1,
    spin: function (event, ui) {
        var value = ui.value;
        var $target = $(event.target);
        var $priceCell = $target.parents('td').next('td');
        var $subtotalCell = $priceCell.next('td');
        $subtotalCell.text(quantity($priceCell.data('price'), value));
    }
});

小提琴 - http://jsfiddle.net/m6csdx51/1/

注意向价格单元添加数据价格

相关问题