使用 php 從 mysql 獲取值到具有一些計算的動態添加/刪除輸入字段

Question

我正在嘗試從 mysql 中獲取值以動態添加/刪除輸入表字段（edit.php）。 我已成功獲取所有值，但我的計算不會自動更新。

這在插入到 mysql(add.php) 的過程中就像魅力一樣

因此，最初用戶使用 add.php 輸入表中的所有值，這些值已成功插入數據庫。 現在我可以選擇讓用戶編輯輸入的值。

用戶單擊 edit.php 並打開表單以使用所有動態輸入進行編輯。 它基本上是一個成本計算表，它將自動計算金額。 我的問題是，當我使用 php 從 mysql 中獲取值時，我能夠獲取值，但計算似乎不起作用 現在，當我手動編輯和更改獲取的上述值時，我可以獲得計算出的數量

我的 PHP

<table class="table table-hover" id="product">
  <thead>
     <tr>
       <th>#</th>
       <th class="col-sm-2">Item<span class="text-danger">*</span></th>
       <th class="col-md-6">Description<span class="text-danger">*</span></th>
       <th>Unit Cost<span class="text-danger">*</span></th>
       <th>Qty<span class="text-danger">*</span></th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
   <?php 
        $stmt           = $link->prepare("SELECT * FROM product WHERE productid=?");
        $stmt           -> bind_param('s', $productid);
        $stmt           -> execute();
        $stmtresult     = $stmt->get_result();
        $count          = 0;
        $numberofrows = $stmtresult->num_rows;
        while($row = $stmtresult->fetch_assoc())
        {
            $no             = $row["no"];
            $items          = $row["item"];
            $description    = $row["description"];
            $unitcost       = $row["unitcost"];
            $est_qty        = $row["qty"];
            $amount         = $row["amount"];
            $totalamount    += $amount;
            $countreg       = ++$count;
            $grossamount = ($totalamount-$discountamount)+$taxamount; //I have declared $discoutamount, $taxamount elsewhere. This does not matter
        ?>
        <input type="hidden" value="<?php echo $numberofrows; ?>" id="rowcount">
         <tr id="row<?php echo $countreg; ?>">
            <th scope="row"><a href=""><?php echo $countreg; ?></a></th>
            <td><input class="form-control item" type="text" name="item[]" value="<?php echo $items; ?>"></td>
            <td><input class="form-control description" type="text" name="description[]" value="<?php echo $description;?>"></td>
            <td><input class="form-control unitcost" type="text" name="unitcost[]" value="<?php echo $unitcost; ?>"></td>
            <td><input class="form-control qty" type="text" name="qty[]" value="<?php echo $qty; ?>"></td>
            <td><input class="form-control amount" readonly name="amount[]" value="<?php echo $amount; ?>"></td>
            <td><?php if($countreg==1){ ?><a class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a><?php }else{ ?><a class="text-danger font-18 btn_remove" title="Remove" name="remove" id="<?php echo $countreg; ?>"><i class="fas fa-trash-alt"></i></a> <?php } ?></td>
          </tr>
    <?php } ?>
 </tbody>

我的 Jquery

<script>
$(document).ready(function(){  
  var i=$('#rowcount').val();
  $('#add').click(function(){  
    i++;  
    $('#product').append('<tr id="row'+i+'"><th scope="row"><a href="">'+i+'</a></th><td><input class="form-control item" type="text" name="item[]"></td><td><input class="form-control description" type="text" name="description[]"></td><td><input class="form-control unitcost" type="text" name="unitcost[]"></td><td><input class="form-control qty" type="text" name="qty[]"></td><td><input class="form-control amount" readonly type="text" name="amount[]"></td><td><a class="text-danger font-18 btn_remove" title="Remove" name="remove" id="'+i+'"><i class="fas fa-trash-alt"></i></a></td></tr>');  
    });  
    $(document).on('click', '.btn_remove', function(){  
         var button_id = $(this).attr("id");   
         $('#row'+button_id+'').remove();  
    });   
});  

$("table").on("change", "input", function () {  //use event delegation
  var tableRow = $(this).closest("tr");  //from input find row
  var one = Number(tableRow.find(".unitcost").val());  //get first textbox
  var two = Number(tableRow.find(".qty").val());  //get second textbox
  var total = one * two;  //calculate total
  tableRow.find(".amount").val(total);  //set value

    function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".amount").each(function () {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }

    });

}
                $("table").change(".amount", function () {
    calculateSum();         

});
});

 </script>

我希望我的問題很清楚。 感謝您的幫助和回應

Answer 1

我自己找到了。 我已經為下面的行更新了我的 Jquery

$("table").on("change", "input", function () { 

至

$("table").on("change paste keyup", "input", function () { 

此外，一旦我刪除動態行，我的總值就不會更新。 所以我更新了刪除按鈕 function 中的腳本。

$(document).on('click', '.btn_remove', function(){  
    var button_id = $(this).attr("id");   
    $('#row'+button_id+'').remove(); 
    $(".Total").trigger("change");
});