时间戳

首页 > 解决方案 > 表格每一行的 HTML/PHP 内联更新和删除

html - 表格每一行的 HTML/PHP 内联更新和删除

问题描述

内联“更新”按钮有点问题，我从 mysql 表中提取数据（完成），使用“foreach”（完成）将该数据呈现到屏幕上，并且每行都有一个更新和删除按钮发布正确的按钮“名称”和用户 ID（完成）。

但是 $_POST 数组没有解析的是带有行信息的正确数据....它确实解析了对底行的更改，但是如果您更改另一行，它只会再次解析最后一行....

    <input type="hidden" name="action" value="submit" />
    <pre></pre>
    <?php print_r($_POST);?>
    <?php 
    echo '<table class="table table-condensed">';
    echo '<thead><tr><th style="width: 15%">Name</th><th style="width: 25%">Login</th><th style="width: 25%">Email</th><th style="width: 7%">Role</th><th style="width: 7%">Group</th><th style="width: 15%">LoftID</th><th>Edit</th><th>Delete</th></tr></thead><tbody>';
        foreach($users as $person){
             echo '<tr>';
             echo '<td><input type="text" class="form-control" name="name" id="'.$person['id'].'" placeholder="Name" value="'.$person['name'].'"/></td>';
             echo '<td><input type="text" class="form-control" name="login" id="'.$person['id'].'" placeholder="Login" value="'.$person['login'].'"/></td>';
             echo '<td><input type="text" class="form-control" name="mail" id="'.$person['id'].'" placeholder="Mail" value="'.$person['mail'].'"/></td>';
             echo '<td><input type="text" class="form-control" name="role" id="'.$person['id'].'" placeholder="Role" value="'.$person['role'].'"/></td>';
             echo '<td><input type="text" class="form-control" name="group" id="'.$person['id'].'" placeholder="Group" value="'.$person['group'].'"/></td>';
             echo '<td><select type="text" class="form-control" name="LoftID" id="'.$person['id'].'" placeholder="Loft">';
             foreach($lofts as $info) {
                 if($info['id']==$person['LoftID']){
                      echo '<option value='.$info["id"].' selected>'.$info["name"].'</option>';
                 }
                 else{
                      echo '<option value='.$info["id"].'>'.$info["name"].'</option>';    
                 }
             }
             echo '</select></td>';
             echo '<td><button type="submit" name="update" value="'.$person['id'].'" class="btn btn-primary">Update</button></td>';
             echo '<td><button type="submit" name="delete" value="'.$person['id'].'" class="btn btn-primary">Delete</button></td>';
             echo '</tr>';
          }   
          echo '</tbody></table>';
    ?>
    </div>
    </form>

我需要的是允许我从 $_POST 中提取数据，然后我可以将其作为基于 ID 的更新返回到数据库中，我相信我可以这样做，因为我已经在我的代码中这样做了……

我真的很想这样做，而无需显示另一个页面，其中包含要更新的数据....

提前致谢

标签： htmlformscrud

解决方案

您需要 Ajax 来完成这项工作，而无需重新加载页面或使用参数转到另一个页面。请记住，按钮不像输入那样具有价值。使用 data-id 或 data-pid 或任何你喜欢的。并输入一个类名，例如“updateBtn”来识别按钮。

echo '<td><button type="button" data-pid="'.$person['id'].'" class="btn btn-primary updateBtn">Update</button></td>';

    <script>  
        $('.updateBtn').on('click', function() { 
        var pid = $(this).data('pid'); console.log(pid); // see the result in console
        var pid = parseInt(pid);  // change to int
        $.ajax({
                url: '/ajax/update-data/index.php', // specify folder and file name
                data: { pid : pid },
                dataType: 'json',
                success: function (response) {                                  
                if(response.status == 'success') {  

                   // do something to the html code to show the successful update
                return false;
                }   
               if(response.status == 'fail') {  

                   // do something to the html code to show the fail update
                return false;
                }   
              }   
           });        
        });
    </script>

阿贾克斯文件：

<?php

  function response ($status) { 
      header("Content-Type:application/json");
      $response['status'] = $status;
      $json_response = json_encode($response);
      echo $json_response;
  }

if($_POST) {

$pid = filter_input(INPUT_POST, 'pid', FILTER_SANITIZE_NUMBER_INT); 

    if($pid) {

        $done = // do php to chage update. You can refer to class or direct php mysql update

         if($done) {
          response ('success');
         }else{
          response ("fail");         
         }

    }else{
    response ("parameter fail");    

    }
}
?>

推荐阅读