使用 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");
});