Question

我使用jQuery来计算数量和总计

的动态表有问题

这是my code

金额=数量* p.unit和总金额

Answer 1

我想很多人会在tab字段之间。为此，我建议绑定focus和blur事件。这是一个工作示例：https://jsfiddle.net/Twisty/epqhhtfc/

<强> HTML

<table id="purchaseItems" name="purchaseItems" align="center">
  <tr>
    <th>Quantity</th>
    <th>P.Unit ($)</th>
    <th>Amount ($)</th>
  </tr>
  <tr>
    <td>
      <input type="text" name="quantity[]" class="next" required />
    </td>
    <td>
      <input type="text" name="price[]" class="next" required />
    </td>
    <td>
      <input type="text" name="amount[]" class="next last" required />
    </td>
    <td>
      <input type="button" name="addRow[]" class="add" value='+' />
    </td>
    <td>
      <input type="button" name="addRow[]" class="removeRow" value='-' />
    </td>
  </tr>
  <tr>
    <th>Total :</th>
    <td colspan='2' id="totalPrice"></td>
  </tr>
</table>

<强> JQuery的

$(document).ready(function() {
  $(document).on('click', '#purchaseItems .add', function() {
    var row = $(this).parents('tr');
    var clone = row.clone();

    // clear the values
    var tr = clone.closest('tr');
    tr.find('input[type=text]').val('');

    $(this).closest('tr').after(clone);
    var total = 0;
    $(".last").each(function() {
      if (!$(this).val() == '') {
        total = total + parseFloat($(this).val());
      }
    })
    $("#totalPrice").html("$" + total);
  });
  $(document).on("blur", ".last", function() {
    var total = 0;
    $(".last").each(function() {
      if (!$(this).val() == '') {
        total = total + parseFloat($(this).val());
      }
    })
    $("#totalPrice").html("$" + total);
  });
  $(document).on('focus', ".last", function() {
    var $qty = $(this).parents("tr").find("input[name^='quantity']");
    var $pr = $(this).parents("tr").find("input[name^='price']");
    var $amnt = $(this).parents("tr").find("input[name^='amount']");
    var a = 0;
    if ($qty.val() == '' || $pr.val() == '') {
      console.log("No values found.");
      return false;
    } else {
      console.log("Converting: ", $qty.val(), $pr.val());
      var q = parseInt($qty.val());
      var p = parseFloat($pr.val());
      console.log("Values found: ", q, p);
    }
    a = q * p;
    $amnt.val(Math.round(a * 100) / 100);
  });
  $(document).on('click', '#purchaseItems .removeRow', function() {
    if ($('#purchaseItems .add').length > 1) {
      $(this).closest('tr').remove();
    }
  });
});

我调整了类名和字段名以适合列标题。添加行时，或last字段失去焦点时，total会刷新。当一行被移除时我没有回去做这个，但我认为你可以处理它。

由于字段始终为string值，因此我使用parseInt()和parseFloat()将其转换为Math的可用值。计算完成后，我将其四舍五入到小数点后两位。关注last字段允许用户标签或单击其他字段，随意输入或更改值，金额将更新。这里唯一需要注意的是，如果用户更改了值并且没有关注金额，则不进行更新。

因此，用户可以添加多个行，然后返回填充它们，或者可以填充行并添加一行。无论哪种方式都有效，并允许用户选择他们想要输入数据的方式。

不确定jquery如何进入此帖子。

使用jquery在动态表中进行计算

1 个答案: