单击按钮更改单元格值 - change cell value on button click

我有一个包含以下内容的表。

 Table parts_stock
*--------------------*
| id |  sku  | stock |
|  1 |  101  |   2   |
|  2 |  102  |   3   |
*--------------------*

到目前为止，这是我的代码，我相信有很多方法可以实现这一点，但理想情况下，我希望在不刷新页面的情况下，根据点击的按钮来更改数量值(可能是AJAX(。

<tbody>
    <?php
    $query = 'SELECT stock_id, sku, in_stock ';
    $query .= 'FROM parts_stock';
        confirmQuery($query);
    $select_skus = mysqli_query($connection, $query);
    $num = mysqli_num_rows($select_skus);
    if($num>0) {
    while($row = mysqli_fetch_assoc($select_skus)) {
    $id   = $row['stock_id'];    
    $sku  = $row['sku'];
    $qty  = $row['in_stock'];

    echo "<tr>";
    echo "<td>".$sku."</td>";
    echo "<td>".$qty."</td>";
    echo "<td>
        <a href='' onclick='rem_qty()' id='minus' name='minus' class='btn btn-warning'><span class='glyphicon glyphicon-minus'></span></a>
        <a href='' onclick='add_qty()' id='plus' name='plus' class='btn btn-success'><span class='glyphicon glyphicon-plus'></span></a>
      </td>"; 
      </td>";    
    }
    }?>
</tbody>

ajax_search.js

<script>
function rem_qty(){
    $.ajax({
        type: "POST",
        url: "update_qty.php",
        data: {id_m: stock_id}
    });
}
function add_qty(){
    $.ajax({
        type: "POST",
        url: "update_qty.php",
        data: 'id_p: stock_id'
    });
}
</script>

update_qty.php文件

<?php
if (isset($_POST['id_m'])) {
$r = $_POST['id_m'];
echo $r;
$cur_inv = "SELECT in_stock FROM parts_stock WHERE stock_id = '".$r."'";
$cur_query = mysqli_query($connection, $cur_inv);
while ($row = mysqli_fetch_assoc($cur_query)) {
    $rem_stock = $row['in_stock'];
    $rem_stock -= 1;
}
$inv_update = "UPDATE parts_stock SET in_stock = '".$rem_stock."' WHERE stock_id = '".$value."'";
$inv_query = mysqli_query($connection, $inv_update);
}
if (isset($_POST['id_p'])) {
$a = $_POST['id_p'];
echo $a;
$cur_inv = "SELECT in_stock FROM parts_stock WHERE stock_id = '".$a."'";
$cur_query = mysqli_query($connection, $cur_inv);
while ($row = mysqli_fetch_assoc($cur_query)) {
    $add_stock = $row['in_stock'];
    $add_stock -= 1;
}
$inv_update = "UPDATE parts_stock SET in_stock = '".$add_stock."' WHERE stock_id = '".$value."'";
}
?>

一个简单而完整的解决方案：只需在两个页面中更改mysqli_connect配置

index.php

<?php
    $connection = mysqli_connect("localhost", "root", "", "dbname"); //change dbname 
    $query = 'SELECT id, sku, stock FROM parts_stock';
    //confirmQuery($query);
    $select_skus = mysqli_query($connection, $query);
    $num = mysqli_num_rows($select_skus);
?>
<table>
    <tr>
        <th>Sku</th>
        <th>Stock</th>
        <th>Action</th>
    </tr>
    <?php if($num>0){
        while($row = mysqli_fetch_assoc($select_skus)) {
            $id   = $row['id'];    
            $sku  = $row['sku'];
            $qty  = $row['stock'];
            echo "<tr>";
            echo "<td>".$sku."</td>";
            echo "<td class='stock-{$id}'>".$qty."</td>";
            echo "<td>
                <a class='btn btn-warning' onclick='add_qty({$id})' href='#'><span class='glyphicon glyphicon-minus'>Value Add</span></a>
                <a class='btn btn-success' onclick='rem_qty({$id})' href='#'><span class='glyphicon glyphicon-plus'>Value Deduct</span></a>
              </td>";
            echo "</tr>" ;
        }
    }?>
</table>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script type="text/javascript">
    function add_qty(id){
        $.ajax({
            type: "POST",
            url: 'update_qty.php', //Relative or absolute path to response.php file
            data: {id:id, type:'add'},
            dataType: "json",
            success: function (data) {
                console.log(data);
                if(data.success){
                    //successfully added
                    $(".stock-"+id).html(data.data.stock);
                    alert(data.msg);
                }
            }
        });
    }
    function rem_qty(id){
        $.ajax({
            type: "POST",
            url: 'update_qty.php', //Relative or absolute path to response.php file
            data: {id:id, type:'rem'},
            dataType: "json",
            success: function (data) {
                console.log(data);
                if(data.success){
                    //successfully added
                    $(".stock-"+id).html(data.data.stock);
                    alert(data.msg);
                }
            }
        });
    }
</script>

update_qty.php

<?php
    $connection = mysqli_connect("localhost", "root", "", "dbname"); ////change dbname 
    header('Content-Type: application/json');
    $success = false;  $msg ="";
    if (isset($_POST['id'])) {
        $id = $_POST['id'];
        $cur_inv = "SELECT * FROM parts_stock WHERE id ={$id}";
        $cur_query = mysqli_query($connection, $cur_inv);
        if(mysqli_num_rows($cur_query)>0){ //if id is exist in database
            if($_POST['type']=="add"){
                $inv_update = "UPDATE parts_stock SET stock = (stock+1) WHERE id = {$id}"; //increase your stock dynamically
            }elseif($_POST['type']=="rem"){
                $inv_update = "UPDATE parts_stock SET stock = (stock-1) WHERE id = {$id}"; //increase your stock dynamically
            }
            $inv_query = mysqli_query($connection, $inv_update);
            if($inv_query){ //If sucess
                $msg = "Successfully Updated"; 
                $success = true;
            }else{ //if failed
                $msg = "Failed to Update";
            }
        }else{
            $msg="Id is not found.";
        }
        $last_inv = "SELECT * FROM parts_stock WHERE id ={$id}";
        $last_query = mysqli_query($connection, $last_inv);
        $row = mysqli_fetch_assoc($last_query);
        echo json_encode(array('success'=>$success, 'msg'=>$msg, 'data'=>$row));
    }
?>

不需要额外的js文件，只需index.php和update_qty.php

Working example
demo.php
<?php
$query = 'SELECT id, sku, stock ';
$query .= 'FROM parts_stock';
    confirmQuery($query);
$select_skus = mysqli_query($connection, $query);
$num = mysqli_num_rows($select_skus);
if($num>0) {
while($row = mysqli_fetch_assoc($select_skus)) {
$id   = $row['id'];    
$sku  = $row['sku'];
$qty  = $row['stock'];
 $data = "";
 $data .= "<tr>";
 $data .= "<td>{$sku}</td>";
 $data .= "<td>{$qty}</td>";
 $data .= "<td>
    <a class='btn btn-warning' href='inventory.php?source=edit_inventory&id={$id}'><span class='glyphicon glyphicon-minus'></span></a>
    <a class='btn btn-success' href='inventory.php?source=edit_inventory&id={$id}'><span class='glyphicon glyphicon-plus'></span></a>
  </td>"; 
echo $a;
  exit;    
}
}?>

  AJAX:

        <!DOCTYPE html>
        <html>
        <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
         <table >
         <tr>
         <th>Id</th>
         <th>Sku</th>
         <th>Qty</th>
         </tr>
         <tbody id="mytable">
          </tbody>
         </table>
        <button id="clickme">Click</button>
        <script>
        $(document).ready(function(){
      $("#clickme").click(function() {
      $.ajax({
      url:"demo.php",
      type:"GET",
      beforeSend:function() {
   $("#mytable").empty();
},
success:function(response){
      $("#mytable").append(response);
}, error:function(err) {
  console.log(err);
}
 })
}); 
  });

在您的HTML Button中创建类似onclick="buttonSubtract1('<?php if(isset($val['itm_code'])){echo $val['itm_code'];}?>')"的onClick事件(您可以从数据库中获取itm_code(。然后为Request和Response编写AJAX。你需要通过itm_code到var x。例如，像这样的xmlhttp.open("POST", "ajax/get_items.php?val=" +x, true);

在AJAX文件中

$item_cat = $_SESSION['item_cat']; // get a category from session
    $iname=$_GET['val']; //get the value from main php file
    if(!key_exists($item_cat)
    {
       $_SESSION['main'][$iname] = "1";
    }
    else
    {
       $_SESSION['main'][$item_cat][$iname]++;
    }
    echo "<pre>";
    print_r($_SESSION['main']);
    echo "</pre>";

编辑1

function buttonSubtract1(x)
{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.location.assign('items.php');
        }
    }
    xmlhttp.open("POST", "ajax/get_items.php?val=" +x, true);
    xmlhttp.send();
}