键入并计算数据库中的值并在输入时显示

Question

I need to calculate the value and show on his own row total Eg select an item and show the per unit, input quantity and show another initial price and lastly add discount and area discount and show total amount.

Tried to use keyup function but it didn't recognize their own row tried to add class and let them recognize the class but caused the add order function not respond.

 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>

Expectation

1. Selection input item to ITEM
2. Show per unit price at own rows Per Unit
3. Add Quantity
4. Get Unit Price * Quantity Show Initial
5. Add Area Discount and normal Discount
6. Show Totals

Answer 1

I hope you did keyup function in on or live . If the element is append, bind the event will not work properly.

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

I gave sample idea to workout your expectation. try and let me know your comment.