Keyup и рассчитать значение из базы данных и отображать на входе - PullRequest
Новая
       3

Keyup и рассчитать значение из базы данных и отображать на входе

2 голосов
/ 30 марта 2019

Мне нужно вычислить значение и показать на его собственной строке итого Например. выберите товар и покажите за единицу, введенное количество и покажите другую начальную цену, добавьте скидку и скидку по площади и покажите общую сумму.

Пытался использовать функцию 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>

1012 * Expectation *

  1. Выбор элемента ввода для пункта
  2. Показывать цену за единицу в отдельных строках за единицу.
  3. Добавить количество
  4. Получить Unit Price * Quantity Показать начальные
  5. Добавить область скидок и обычную скидку
  6. Показать итоги

1 Ответ

1 голос
/ 30 марта 2019

Я надеюсь, что вы сделали функцию keyup в на или live . Если элемент добавить, связать событие не будет работать должным образом. 

<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>

Я дал пример идеи, чтобы отработать ваши ожидания. попробуйте дать мне знать ваш комментарий.

...