时间戳

首页 > 解决方案 > 如果未选中复选框，则动态表将值添加到列

html - 如果未选中复选框，则动态表将值添加到列

问题描述

如果未选中复选框的行，我需要将支付金额添加回未结金额。目前我现在面临的是当我取消检查时，未结清的金额不断减少并且没有加回来。我的第二行没有支付金额，但如果我检查它也会继续减少价值。有人可以帮助我编码吗？

初始版本

 Name | Outstanding | Pay  | 
Item 1|   20,000    | 0.00 |
Item 2|   10,000    | 0.00 |
Item 3|    3,000    | 0.00 |

我对检查的预期结果：

 Name | Outstanding |  Pay  |         |
Item 1|   14,000    | 6,000 | checked |
Item 2|    7,000    | 3,000 | checked |
Item 3|    3,000    |  0.00 |         |

我对未选中的预期结果：

如果未选中，它将添加回未结金额。

 Name | Outstanding |  Pay  |          |
Item 1|   20,000    | 6,000 | unchecked|
Item 2|    7,000    | 3,000 | checked  |
Item 3|    3,000    |  0.00 |          |

我遇到的问题：

  1. 我6,000在第一行输入并检查，未完成的将变为14,000. 然后我检查了没有输入支付金额的第二行，第二行未付金额也会扣除并再次扣除第一行。但由于支付金额为零，因此不应再次扣除或扣除金额。
  2. 如果我一直不检查和检查，金额将不断减少。
 Name | Outstanding |  Pay  |         |
Item 1|    8,000    | 6,000 | checked |
Item 2|   18,000    |  0.00 | checked |
Item 3|    3,000    |  0.00 |         |


$(function() {

  function calcSum(t) {
    var result = 0.00;
    var OutAmt = 0.00;
    var Amt = 0.00;
    $("tbody tr").each(function(i, r) {
      if ($('input[name="chck"]', r).is(":checked")) {
        result += parseFloat($(".payAmt", r).val());
        OutAmt += parseFloat($(".outstandingAmt", r).text().replace(/,/g, ''))
        Amt = $('.outstandingAmt', r).text((OutAmt - result).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));

      }
    });
    return result;
  }

  function updateSum(tbl) {
    var t = calcSum(tbl);
    $("#txtUnappliedAmt").val(t.toFixed(2));
  }

  updateSum($("#price-list"));

  $("#price-list input").change(function() {
    updateSum($("#price-list"));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
  <thead>
    <tr>
      <th>Name</th>
      <th>Outstanding</th>
      <th>Pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item name">Item 1</td>
      <td class="outstandingAmt">20,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>

      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 2</td>
      <td class="outstandingAmt">10,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 3</td>
      <td class="outstandingAmt">5,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
  </tbody>
</table>
<div>
  <label><b>Unapplied Amount:</b></label>
  <input type="text" id="txtUnappliedAmt" value="0.00" disabled>
</div>

标签： htmljquery

解决方案

您可以只计算复选框已选中/未选中的行，并保留您的calcSum函数仅用于从选中的复选框中获取总数。

演示代码：

$(function() {

  function calcSum(t) {
    var result = 0.00;
    $("tbody tr").each(function(i, r) {
      if ($('input[name="chck"]', r).is(":checked")) {
        result += parseFloat($(".payAmt", r).val());//just for total
      }
    });
    return result;
  }

  function updateSum(tbl) {
    var t = calcSum(tbl);
    $("#txtUnappliedAmt").val(t.toFixed(2));
  }

  updateSum($("#price-list"));
 //keep this on check of checkbox..
  $("#price-list input:checkbox").change(function() {
    var closest_row = $(this).closest("tr")//closest row..
    var pay_ = parseFloat($(".payAmt", closest_row).val())
    var OutAmt = parseFloat($(".outstandingAmt", closest_row).text().replace(/,/g, ''))
    if ($(this).is(":checked")) {
      $('.outstandingAmt', closest_row).text((OutAmt - pay_).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); //deduce
    } else {
      $('.outstandingAmt', closest_row).text((OutAmt + pay_).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); //add
    }
    updateSum($("#price-list"));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
  <thead>
    <tr>
      <th>Name</th>
      <th>Outstanding</th>
      <th>Pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item name">Item 1</td>
      <td class="outstandingAmt">20,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>

      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 2</td>
      <td class="outstandingAmt">10,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 3</td>
      <td class="outstandingAmt">5,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
  </tbody>
</table>
<div>
  <label><b>Unapplied Amount:</b></label>
  <input type="text" id="txtUnappliedAmt" value="0.00" disabled>
</div>

推荐阅读