Question

实际上如何根据具有微调器的数量（输入框）自动计算'小计'和'总金额'，我是带计算功能的js的新手，所以任何建议都将受到赞赏

由于

<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>

Answer 1

我更新了你的小提琴。我添加了小计和价格的类，并使用微调器的stop方法在值更改后验证它，查看

fiddle here

这是停止功能：

$( ".spinner" ).spinner({
min: 1,
stop: function(event, ui) {
    var _parent = $(this).closest('tr');
    var _price = _parent.find('.price').text().replace('$', '');
    _parent.find('.subtotal').html('$' + (_price * $(this).val()));
    var _total = 0;
    $( ".subtotal" ).each( function() {
        var _thisSub = $(this).text().replace('$', '');
        if( !isNaN( _thisSub ) ) {
            _total = _total + parseInt(_thisSub);
        }
    } );
    $( "#totalAmount" ).html('$' + _total);
}});

编辑：我没有使用更改方法，因为它仅在元素模糊时触发，这会导致更改值的延迟。更新了总数的代码，完全忘了它。

Answer 2

我建议使用val函数来获取输入。

使用on()进行更改并获得通知时收到通知 $(".spinner").each迭代粗略的输入。

此外，我建议将货币符号与货币分开：

<td>$<span class="money">1500.00</span></td>

祝你好运

根据输入文本数量，使用jquery创建小计和总金额

2 个答案: