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

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>

期待

1. 选择输入项目到 ITEM
2. 在每单位自己的行中显示每单位价格
3. 添加数量
4. 获取Unit Price * Quantity显示初始
5. 添加区域折扣和普通折扣
6. 显示总计

Answer 1

我希望您在on或live 中使用了 keyup 功能。 如果元素被追加，则绑定事件将无法正常工作。

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

我给出了示例想法来满足您的期望。 试着让我知道你的评论。