Question

我需要计算值并在自己的行总数上显示例如。选择一个项目并显示单位，输入数量并显示另一个初始价格，最后添加折扣和区域折扣并显示总金额。

试图使用keyup函数，但无法识别自己的行尝试添加类并让他们识别该类，但导致添加顺序功能无法响应。

function myCreateFunction() {

  var tbody = document.getElementById("myTable");
  var row = tbody.insertRow(-1);
  var cell1 = row.insertCell(-1);
  var cell2 = row.insertCell(-1);
  var cell3 = row.insertCell(-1);
  var cell4 = row.insertCell(-1);
  var cell5 = row.insertCell(-1);
  var cell6 = row.insertCell(-1);
  var cell7 = row.insertCell(-1);
  var cell8 = row.insertCell(-1);
  var cell9 = row.insertCell(-1);
  var cell10 = row.insertCell(-1);
  var cell11 = row.insertCell(-1);

  cell1.innerHTML = "<input type='text' class='form-control Category' class='Category' name='Category[]' placeholder='Category'>";
  cell2.innerHTML = "<input type='text' class='form-control Item' name='Item[]' placeholder='Item'>";
  cell3.innerHTML = "<input type='text' class='form-control PerUnit' name='PerUnit[]' placeholder='Per Unit' readonly>";
  cell4.innerHTML = "<input type='text' class='form-control Quantity' name='Quantity[]' placeholder='Quantity'>";
  cell5.innerHTML = "<input type='text' class='form-control Initial' name='Initial[]' placeholder='Initial' readonly>";
  cell6.innerHTML = "<input type='text' class='form-control Discount' name='Discount[]' placeholder='Discount'>";
  cell7.innerHTML = "<input type='text' class='form-control Area' name='Area[]' placeholder='Area'>";
  cell8.innerHTML = "<input type='text' class='form-control NETT' name='NETT[]' placeholder='NETT'>";
  cell9.innerHTML = "<input type='checkbox' class='form-control FOC' name='FOC[]' placeholder='FOC'>";
  cell10.innerHTML = "<input type='text' class='form-control Total' name='Total[]' placeholder='Total' readonly>";
  cell11.innerHTML = "<button class='close' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";

}

$('#myTable').on('click', '.close', function() {
      $(this).closest('tr').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Item</th>
      <th scope="col">Per Unit</th>
      <th scope="col">Quantity</th>
      <th scope="col">Initial</th>
      <th scope="col">Discount</th>
      <th scope="col">Area</th>
      <th scope="col">NETT</th>
      <th scope="col">FOC</th>
      <th scope="col">Total</th>
      <th scope="col">Remove</th>
    </tr>
  </thead>
  <tbody id="myTable">
  </tbody>
</table>

<u onclick="myCreateFunction()" style="cursor:pointer;margin-left:5px">+Add Order</u>

期望

选择输入项目到ITEM
在每行自己的行上显示单价
添加数量
获取Unit Price * Quantity显示首字母
添加区域折扣和常规折扣
显示总计

Answer 1

我希望您在 on 或 live 中完成了keyup功能。如果元素是append，则绑定事件将无法正常工作。

<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $('#myTable').on('click','.close',function(){
        $(this).closest('tr').remove();
      });
      var PerUnit = 0;
      var Quantity = 0;
        $("tbody").on('keyup','.form-control',function() {
            PerUnit = $(this).hasClass('PerUnit') ? $(this).val() : PerUnit;
            Quantity = $(this).hasClass('Quantity') ? $(this).val() : Quantity;
            var Total = PerUnit * Quantity;
            $(this).closest('tr').find('.Total').val(Total);
            //document.getElementsByClassName('Total')[0].value = Total;
            // do stuff!
        });
    });
</script>

我给出示例想法来锻炼您的期望。尝试让我知道您的评论。

键入密码并从数据库计算值，并在输入中显示

1 个答案: