单击按钮更改单元格值

时间:2016-10-08 05:03:41

标签: php jquery ajax

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

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

这是我的代码到目前为止,我确信有很多方法可以实现这一点,但理想情况下我希望qty 根据点击的按钮进行更改而不刷新页面( 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."'";
}
?>

3 个答案:

答案 0 :(得分:0)

HTML Button举办onClick此类事件onclick="buttonSubtract1('<?php if(isset($val['itm_code'])){echo $val['itm_code'];}?>')" (您可以从数据库中获取itm_code)。然后写下{{1} } {} {}}和AJAX。您需要通过RequestResponse。例如像这样itm_code

在AJAX文件中

var x

编辑1

xmlhttp.open("POST", "ajax/get_items.php?val=" +x, true);

答案 1 :(得分:0)

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);
}

 })
}); 
  });

答案 2 :(得分:0)

  

一个简单而完整的解决方案:只需在两个页面中更改 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