javascript - 使用 php 和 js/jquery 编辑 html 表中的行并将其保存在 db 中

Question

我有一张表，我从数据库中获取数据。现在，我想分别编辑每一行并将编辑后的值保存在数据库中。 我在谷歌浏览并开始知道它可以使用 JS/Jquery 来完成，但我无法弄清楚如何去做。

我是 PHP 新手，所以我不知道该怎么做。

我的表格代码和生成的值是:

<?php

$menu = $conn -> query("Select * from menu"); ?>

<table class="table table-hover">

<tr>

    <th>Item ID</th>
    <th>Item Name</th>
    <th>Item Description</th>
    <th>Item Price</th>
    <th>Item Qty</th>
    <th>Item Type</th>
    <th>Status</th>
    <th>Manage</th>
</tr>
<?php
 foreach ($menu as $row) {
    echo "<tr>";
    echo "<td>".$row['ItemId']."</td>";
    echo "<td>".$row['ItemName']."</td>";
    echo "<td>".$row['ItemDesc']."</td>";
    echo "<td>".$row['ItemPrice']."</td>";
    echo "<td>".$row['ItemQty']."</td>";
    echo "<td>".$row['ItemType']."</td>";   ?>
    <td class="dropdown">
        <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
            <button type="button" class="btn btn-danger btn-block btn-sm dropdown-toggle color-chooser-btn" data-toggle="dropdown">Status <span class="caret"></span></button>
            <ul class="dropdown-menu color-chooser">
                <li><a class="text-green" href="#"><i class="fa fa-square"></i> Available </a></li>
                <li><a class="text-red" href="#"><i class="fa fa-square"></i> Not Available</a></li>
            </ul>
        </div>

    </td>
    <td>
        <a data-toggle="modal" data-target="#compose-modal">
            <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button></a>
        <a data-toggle="modal" data-target="#delete-modal">
            <button class="btn btn-primary btn-xs"><i class="fa fa-trash-o"></i></button></a>
    </td>
    <?php
    echo "</tr>";
    } ?>
   </table>

Answer 1

这里我们有 list.php。我们可以让 status 像一个切换按钮。 像这样尝试。我希望您使用的是 Bootstrap 框架。

    <div class="row">
      <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9" style="padding-right:50px;">
        <div class="table-responsive">
           <table class="table table-striped">
             <thead>
               <tr>
                <th style="text-align:left">Item ID</th>
                <th style="text-align:left">Item Name</th>
                <th style="text-align:left">Item Description</th> 
                <th style="text-align:left">Item Price</th>                                
                <th style="text-align:left">Item Qty</th>
                <th style="text-align:left">Item Type</th>
                <th style="text-align:left">Status</th>
                <th style="text-align:left">Manage</th>
              </tr>
            </thead>
            <tbody id="content-body">

            </tbody>
          </table>
       </div><!-- Closed tabel responsive -->
     </div>

现在我们有了列表模板。

jquery 函数在下面

    listItems:function(){
    _this=this;
        $.ajax({
          url:"listitem.php", // data should come from here
          type:"GET",
          success:function(data){
            if(!data.error)
            {
                _this.renderList(data); //sending data to another function.
            }
            else
            {
             $("#content-body").html("<tr><td colspan='11'>"+data.error+"</td></tr>"); // showing error
            }

        },
        error:function(data){
        $("#content-body").html("<tr><td colspan='11'>No item available.</td></tr>"); //showing error
        }
      });
    },
    renderList:function(data){ // here we will receive data and list
      _this=this;           
    var obj = data;//console.log(obj);  

    if(obj.length < 15)//no of items per page for pagination
    {
        $(".next").addClass("disabled");
    }else
    {
        $(".next").removeClass("disabled");
    }

    var testcontent = "";
    linkstatus = '<a class="anchorstatus" href="#">';
    linkmanage = '<a class="anchoredit" href="#">';


    var row='<tr id={itemid}>'+
    '<td>{ItemName}</a></td>'+
    '<td>{ItemDesc}</a></td>'+
    '<td>{Itemprice}</a></td>'+
    '<td>{ItemQty}</a></td>'+
    '<td>{ItemType}</a></td>'+
    '<td>'+linkstatus+'{Itemstatus}</a></td>' +
    '<td>'+linkedit+'Edit</a></td>' +
    "</tr>";

    for(i in obj)
    {
        str=row;

        for(j in obj[i])
        {
            thisvalue=obj[i][j];

            if(thisvalue===null)
            thisvalue="Not Defined";

            if(thisvalue==="Available")
                thisvalue="<p class='ok'>"+thisvalue+"</p>";

            if(thisvalue==="NotAvailable")
                thisvalue="<p class='notice'>"+thisvalue+"</p>";
            var test = "{"+j+"}";
            str=str.replace("{"+j+"}",thisvalue);

        }

        testcontent+=str;
    }
    $("#content-body").html(testcontent); 
},
statusEvent:function(){ // for changing the status dynamically.
    _this=this;

    $("body").on("click",".anchorstatus",function(){
        status=$(this).text();
        id=$(this).parents("tr").attr("id");

        if(status=="Available") // checking status
        {
            statusvalue="NotAvailable";
    _this.updateItem({  // sending status to update db.
        "itemstatus":"NotAvailable"},id,statusvalue);  
        }
        else
        {
            statusvalue="Available";
              _this.updateItem({ // sending status to update db.
    "itemstatus":"Available"},id,statusvalue);
        }
    });
  },
   updateItem(contentdata,itemid,statusvalue){ // updating data

    $.ajax({
        url: "admin/v1/list.php/"+itemid,
        type: "PUT",
        data: JSON.stringify(contentdata),
        success: function(data){
            if(statusvalue==="Available")
                statusvalue="<p class='ok'>"+statusvalue+"</p>";

            if(statusvalue==="NotAvailable")
                statusvalue="<p class='notice'>"+statusvalue+"</p>";

            if(data.success)
            {
                $("#"+id+" .anchorstatus").html(statusvalue);   // success message                  
            }
        },
        error:function(data){
            console.log(data);  
            if(data.status === 401)
            {
                console.log(data.status);
                showError("Session Expired");
                setTimeout(function (){
                  window.location="index.php";        
              },1000);
            }           
        }
    });
}