javascript - 如何计算HTML表格栏数据

我有一个动态创建的HTML表，当页面加载时，我正在创建具有以下列ItemName，I Code，MRP，Price，UnitQty，Disc%，DiscAmt，，Gst%和GstAmt

TotalAmt是自动完成字段，因此用户通过键入来选择项目名称，当用户集中注意力时，我将填充一些相应的字段，当用户在ItemName字段内键入内容时，我将计算一些值并根据UnitQty相应字段中的值进行填充cc>事件，这一切都在HTML表中发生

在表格之外，我有一个输入字段keyup，正在使用某种计算方式得到它，即SubTotal，因此对于相应的表行，有一个Total Amt列，我必须在其中填充price * UnitQty，但目前正在填充(price * UnitQty) +GstAmt +DiscAmt我待会再做

我的问题是什么

所以下面是一个price * UnitQty输入字段，我在其中填充每一行的subTotal，因此我将值存储在全局变量中，然后将当前变量添加到其中，但是当我键入假定2并且price为100时，它等于200那么我要删除2并在那时写2就是将之前的200与当前的300相加并填充500，我知道这是因为price * UnitQty它也在加上先前的值，但这是不正确的

HTML表中没有小计的列，这就是为什么我将其存储在变量中的原因

function format(number, decimals = 2) {
  const fixed = parseFloat(number).toFixed(decimals);
  const [float, dec] = fixed.split('.')
  const intFormatted = (+float)
  return intFormatted + (dec ? '.' + dec : '');
}


$(document).ready(function() {


  var tableData = {};
  var tabledata = {
    "ALMOND CHBAR~2402": {
      "itemName": "ALMOND CHBAR",
      "itemCode": "2402",
      "costPrice": 20.0,
      "gstPercentage": 14.5,
      "unitCode": "NOS",
      "mrp": 30.0
    },
    "A BR SB EX~333": {
      "itemName": "A BR SB EX",
      "itemCode": "333",
      "costPrice": 1.0,
      "gstPercentage": 0.0,
      "unitCode": "NOS",
      "mrp": 1.0
    }
  }

  populateData(tabledata)

  function rowappend(tbody) {

    const markup =
      `<tr>
									  <td>
									    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
									  </td>
									  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
									  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
									  <td><input type="tel"  id="purRatetd"  class="form-control commantd"name="purRatetd"></td>
									  <td>
									    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
									  </td>

									  <td>
									    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
									  </td>
									  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
									  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
									  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
									  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
									  <input type="hidden" name="unittd" id="unittd" class="form-control commantd">
									  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>

									</tr>`

    $(tbody).append(markup);
    setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

    var autoCompleteData = Object.keys(tableData);
    $("[name=itemNametd]", tbody).last().autocomplete({
      source: autoCompleteData,
      autoSelectFirst: true,
      autoFocus: true

    }).data('tableData', tableData);


  }


  function getValues(row) {
    const search = ($('[name=itemNametd]', row).val()).toString()

    var data = $('[name=itemNametd]', row).data('tableData');
    const value = data[search];

    if (value) {
      CostPrice = value.costPrice;
      $(row).find("[name=itemCodetd]").val(value.itemCode);
      $(row).find("[name=mrptd]").val(format(value.mrp));
      $(row).find("[name=purRatetd]").val(format(CostPrice));
      $(row).find("[name=unittd]").val(value.unitCode);
      $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
      $("[name=purRatetd]").focus();
    }

  }


  $(document).on("keyup", "[name=purRatetd]", function(e) {
    const row = e.target.parentElement.parentElement
    var unitQuantity = $(row).find("[name=unitQtytd]").val();

    var purchaseRate = $(row).find("[name=purRatetd]").val();
    var mrp = $(row).find("[name=mrptd]").val();
    totalAmount = (parseFloat(unitQuantity) * parseFloat(purchaseRate)) || 0;

    $(row).find("[name=totalAmttd]").val(format(totalAmount));

  });
  var subTotalAmt = 0;
  $(document).on("keyup", "[name=unitQtytd]", function(e) {

    const row = e.target.parentElement.parentElement
    unitQuantity = $(row).find("[name=unitQtytd]").val();

    purchaseRate = $(row).find("[name=purRatetd]").val();
    mrp = $(row).find("[name=mrptd]").val();
    totalAmount = (parseFloat(unitQuantity) * parseFloat(purchaseRate)) || 0;

    subTotalAmt += totalAmount || 0

    $(row).find("[name=totalAmttd]").val(format(totalAmount));
    $("#subTotalInput").val(format(subTotalAmt));
  });


  document.addEventListener("keydown", function(e) {
    const row = event.target.parentElement.parentElement

    var keycode = event.keyCode || event.which;
    if (keycode == '13') {
      if (!$(event.target).val()) {
        e.preventDefault();
        return;
      }
      const row = e.target.parentElement.parentElement
      if (event.target.matches('[name=discPercentagetd]')) {
        if ($(row).parent().find('tr').length - $(row).index() === 1) {
          rowappend(event.target.parentElement.parentElement.parentElement)
        }
      }
    }

  });

  $(document).on("focusout", "[name=itemNametd]", function(e) {
    const row = e.target.parentElement.parentElement
    getValues(e.target.parentElement.parentElement)
  });

  function populateData(data) {
    tableData = Object.assign({}, data);
    var autoCompleteData = Object.keys(data);
    rowappend($('tbody', '#tableInvoice'));


  }




});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row tableGrn" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">I Code</th>
        <th id="mrpth" class="commanth">MRP</th>
        <th id="purRateth" class="commanth">Price</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="discPercentageth" class="commanth">Disc %</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">GST %</th>
        <th id="gstAmtth" class="commanth">GST Amt</th>
        <th id="totalAmtth" class="commanth">Total Amt</th>

      </tr>
    </thead>
    <tbody>
    </tbody>

  </table>

</div>
<div class="form-row">

  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="subTotalInput">Sub Total</label>
    <div class="input-group">
      <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="subTotalInput" id="subTotalInput" readonly="readonly" tabindex="-1">

    </div>
  </div>
</div>

注意-：请不要对TotalAmt列感到困惑，因为我将所有金额相加即可用于其他用途

目前，我一直在按行计算subTotal，并在Input字段中进行填充

在keyup上按enter它将创建一个新行

最佳答案

请用以下代码替换您的代码

$(document).on("keyup", "[name=purRatetd],[name=unitQtytd]", function(e) {
    var unitQuantity = $(this).closest('tr').find("[name=unitQtytd]").val();
    var purchaseRate = $(this).closest('tr').find("[name=purRatetd]").val();
    var unitQuantity = unitQuantity ? unitQuantity : 1;
    var mrp = $(this).closest('tr').find("[name=mrptd]").val();
    totalAmount = (parseFloat(unitQuantity) * parseFloat(purchaseRate));
    $(this).closest('tr').find("[name=totalAmttd]").val(totalAmount);
    var subTotal = 0;
    $("[name=totalAmttd]").each(function(){
        var curVal = parseFloat($(this).val());
        if(curVal){
            subTotal = curVal + subTotal;
        }
    });
    $("#subTotalInput").val(subTotal);
});

N：B-您在输入字段中使用id，在输入字段后将重复一次，因此避免使用id和name ...在整个代码中，您可以使用class代替name或id ... class name可以是相同，但ID和名称在多个字段中不能相同

关于javascript - 如何计算HTML表格栏数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57143794/