在总Jquery上扣除表行的当前值

Question

我想减去点击总数的当前表格行值。我正在获得Nan。

这是我目前的output。

这是我的删除代码。

＆＃13;

＆＃13;

function delete_row() {
  var qty = $("input[name*='qty']");
  var piece_type = $("select[name*='piece_type']");
  var total = $("#wpc_total").text();

  qty.each(function(index) {
    var sum = 0;
    var quantity = $(this).val() ? $(this).val() : 0;
    var selected = piece_type.eq(index).find(":selected").text();

    if (selected == documents) {
      price = 10;
      sum = parseFloat(quantity) * parseFloat(price);
    }

    if (selected == small) {
      price = 20;
      sum = parseFloat(quantity) * parseFloat(price);
    }
    total -= sum;
  });
  $("#wpc_total").text("Total : $" + total);
}


$(document).on("click", "input[value='Delete']", delete_row);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一个简单的解决方案是重置这些值并触发更改事件

function delete_row() {
    //Use the current element to context to target parent <TR>
    var tr = $(this).closest('tr');
    //Use DOM traversal method to target element
    var elemns = tr.find("select[name*='piece_type'],.number");
    //Reset value and trigger change event
    elemns.val('').trigger('change');
}

Fiddle

jQuery(document).ready(function($) {

  var price = 0;

  var documents = "Documents (Up to 1kg)";
  var small = "Small (1-5kg 85cm)";
  var medium = "Medium (5-10kg 110cm)";

  function checkTotal() {

    var qty = $("input[name*='qty']");
    var piece_type = $("select[name*='piece_type']");
    var total = 0;

    qty.each(function(index) {
      var sum = 0;
      var quantity = $(this).val() ? $(this).val() : 0;
      var selected = piece_type.eq(index).find(":selected").text();

      if (selected == documents) {
        price = 10;
        sum = parseFloat(quantity) * parseFloat(price);
      }

      if (selected == small) {
        price = 20;
        sum = parseFloat(quantity) * parseFloat(price);
      }

      if (selected == medium) {
        price = 30;
        sum = parseFloat(quantity) * parseFloat(price);
      }
      total += sum;
    });
    $("#wpc_total").text("Total : $" + total);
  }

  function delete_row() {
    var tr = $(this).closest('tr');
    tr.find("select[name*='piece_type'],.number").val('').eq(0).trigger('change');
  }

  $(document).on("click", "input[value='Delete']", delete_row);
  $("select[name*='piece_type'],.number").change(checkTotal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wpc_total"></div>

<table>
  <tbody data-repeater-list="pq_package_items">
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
  </tbody>
</table>

Answer 2

问题在于您正在尝试解析字母数字字符串，因此得到的数字不是数字＆＃39;。

"Total : $" + total

尝试将总金额存储在隐藏的输入字段中并对其进行修改，而不是从div标记中获取值。

＆＃13;

＆＃13;

jQuery(document).ready(function($) {

  var price = 0;

  var documents = "Documents (Up to 1kg)";
  var small = "Small (1-5kg 85cm)";
  var medium = "Medium (5-10kg 110cm)";

  function checkTotal() {

    var qty = $("input[name*='qty']");
    var piece_type = $("select[name*='piece_type']");
    var total = 0;

    qty.each(function(index) {
      var sum = 0;
      var quantity = $(this).val() ? $(this).val() : 0;
      var selected = piece_type.eq(index).find(":selected").text();

      if (selected == documents) {
        price = 10;
        sum = parseFloat(quantity) * parseFloat(price);
      }

      if (selected == small) {
        price = 20;
        sum = parseFloat(quantity) * parseFloat(price);
      }

      if (selected == medium) {
        price = 30;
        sum = parseFloat(quantity) * parseFloat(price);
      }

      total += sum;


    });
    $("#wpc-sum").val(total);
    $("#wpc_total").text("Total : $" + total);
  }

  function delete_row() {
    var qty = $("input[name*='qty']");
    var piece_type = $("select[name*='piece_type']");
    var total = $("#wpc-sum").val();

    qty.each(function(index) {
      var sum = 0;
      var quantity = $(this).val() ? $(this).val() : 0;
      var selected = piece_type.eq(index).find(":selected").text();

      if (selected == documents) {
        price = 10;
        sum = parseFloat(quantity) * parseFloat(price);
      }

      if (selected == small) {
        price = 20;
        sum = parseFloat(quantity) * parseFloat(price);
      }
      total -= sum;
    });
    $("#wpc_total").text("Total : $" + total);
  }


  $(document).on("click", "input[value='Delete']", delete_row);
  $("select[name*='piece_type'],.number").change(checkTotal);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wpc_total"></div>
<input type="hidden" id="wpc-sum">
<table>
  <tbody data-repeater-list="pq_package_items">
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;