使用 ajax jquery php 和 mysql 制作账单

Question

我正在做帐单，当我添加多个产品时，所有产品的价格都是一样的。 正因为如此，我什至无法得到所有这些的总和但我做不到，但我正在为此苦苦挣扎。请检查我的代码并告诉我答案。

bill.php

<?php
include 'head.php';
?>

<div>
    <table class="table table-sm table-bordered table-striped">
        <thead>
            <tr>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total Amount</th>
                <th><input class="addrow" type="button" name="" value="Add"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><select class="form-control">
                    <option value="">--select--</option>
                </select></td>
                <td style="width: 100px"><input class="form-control quantity" type="number" name=""></td>
                <td style="width: 100px"><input class="form-control price" value="" disabled type="text" name=""></td>
                <td style="width: 200px"><input class="form-control amount" value="" disabled type="text" name=""></td>

                <td><input class="deleterow" type="button" name="" value="Delete"></td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function(){
        $.ajax({
            url:"webservice.php",
            type:"post",
            dataType:'json',
            success:function(data){
                $('.table tbody select').append(data);
            },
            error:function(){
                console.log("ERROR IN AJAX");
            }
        });
    });

    $(document).on('change','select',function(){
        let product_value = $(this).val();
        $.ajax({
            url:"productprice.php",
            type:"post",
            data:{product_value},
            dataType:'json',
            success:function(data){
                $('.price').val(data);
            },
            error:function(){
                console.log("ERROR IN AJAX");
            }
        });
    });

    $(document).on('click','.addrow',function(){
        $('.table tbody tr:first-child').clone().appendTo('.table tbody');
    });
    $(document).on('click','.deleterow',function(){
        if($('.table tbody').children().length == 1){
            alert("minimum 1 Product required");
        }else{
            $(this).closest('tr').remove();  
        }     
    });

    $(document).on('change','.quantity',function(){
        let quantity = $('.quantity').val();
        let price = $('.price').val();

        $('.amount').val(quantity * price);
    });
</script>

webservices.php

<?php

include 'connection.php';

$sql = "SELECT * FROM `products`";

$result = mysqli_query($db,$sql);

// $output ="";

while ($row = $result->fetch_assoc()) {
    $output[] = "<option value=$row[product_id]>$row[product_name]</option>";
}

echo json_encode($output);

productprice.php

<?php

include 'connection.php';

$sql = "SELECT * FROM `products`";

$result = mysqli_query($db,$sql);

// $output ="";

while ($row = $result->fetch_assoc()) {
    $output[] = "<option value=$row[product_id]>$row[product_name]</option>";
}

echo json_encode($output);

Answer 1

在您当前的代码中，每当您的选择发生变化时，您都将使用类 price 定位所有元素。相反，您可以在这里使用$(this).closest('tr').find('.price') closest() 方法将获得最接近发生变化的tr 然后使用.find() 方法获取所需的价格输入。数量变化事件也是如此。

演示代码：

//just for demo...
var data = "<option value=1>A</option><option value=2>B</option><option value=3>C</option>"
$('.table tbody select').append(data);

$(document).on('change', 'select', function() {
  let product_value = $(this).val();
  //declare this outside ajax call..
  var selector = $(this).closest('tr').find('.price')
  /*$.ajax({
    url: "productprice.php",
    type: "post",
    data: {
      product_value
    },
    dataType: 'json',
    success: function(data) {*/
  selector.val(34); //just for demo.. use .val(data)
  /*},
    error: function() {
      console.log("ERROR IN AJAX");
    }
  });*/
});

$(document).on('click', '.addrow', function() {
  var cloned = $('.table tbody tr:first-child').clone();
  $(cloned).find("select").val(""); //empty select
  $(cloned).find("input:not(:last)").val(""); //empty input values
  $(cloned).appendTo('.table tbody');
});
$(document).on('click', '.deleterow', function() {
  if ($('.table tbody').children().length == 1) {
    alert("minimum 1 Product required");
  } else {
    $(this).closest('tr').remove();
  }
});

$(document).on('change', '.quantity', function() {
  let quantity = $(this).val(); //get qty value where change occur
  let price = $(this).closest('tr').find('.price').val(); //get price only from required row..

  //add result only on same row..
  $(this).closest('tr').find('.amount').val(quantity * price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm table-bordered table-striped">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total Amount</th>
      <th><input class="addrow" type="button" name="" value="Add"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="form-control">
          <option value="">--select--</option>
        </select>
      </td>
      <td style="width: 100px"><input class="form-control quantity" type="number" name=""></td>
      <td style="width: 100px"><input class="form-control price" value="" disabled type="text" name=""></td>
      <td style="width: 200px"><input class="form-control amount" value="" disabled type="text" name=""></td>

      <td><input class="deleterow" type="button" name="" value="Delete"></td>
    </tr>
  </tbody>
</table>