鍵入並計算數據庫中的值並在輸入時顯示

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>

我給出了示例想法來滿足您的期望。 試着讓我知道你的評論。