使用ID從表中刪除特定行，並使用Jquery Ajax php mysql在后台刷新同一表

Question

我建立了一個動態的html表，該表從mysql table獲取數據。 我可以顯示表格內容。 但是，當我試圖刪除第二，第三，第四等行（除第一行之外的任何行）時，我的第一行總是被刪除

這是我的桌子

{
 $staff=mysqli_query($con,"SELECT * FROM staff_port");
 echo " <form id='form_id' method='javascript:void(0);'>";
 while($staff_data=mysqli_fetch_array($staff)) 
{ 
 echo "<div id='next'><tbody>
 <tr class='even pointer'>
 <td class=' '>&nbsp;<i class='fa fa-check-circle green'></i></td>
 <td class=' '><a href='#' target='_blank'><i class='fa fa-file-pdf-o blue'>
 </i> ".$staff_data['name']."</td>
 <td class=' '>".$staff_data['email']."</td>
 <td class=' '>".$staff_data['uid']."</td>
 <td class=' '>Thrissur</td>
 <td class=' '>IT Developer</td>
 <td class='last'><input type='text' class='hidden' name='usridl' id='usrid' value='".$staff_data['id']."'>
 <a href='javascript:void(0);' id='dltbutton' name='btn-dlt'  onclick='user_delete();'><i class='fa fa-trash red'></i></a>
 </td>
 </tr>
 </tbody></div>";
} 
}

我正在使用jquery / ajax作為后期操作

function user_delete() 
{
   if(confirm("Do you really want to delete record ?"))
      {
        var usrid = $("#usrid").val();
{
    var dataString = 'userid=' + usrid + '&page=delete';
    $.ajax({
        type: "POST",
        url: "include/classes/staff-dlt.php",
        data: dataString,
        cache: false,
        beforeSend: function() 
        {
            $("#next").html('<img src="include/images/loading.gif"/>');

        },
 success: function (res) {
                             if(res=='1')
                             {
                                $('#next').html(res);
                             }

                             if(res=='2')
                             {  
                                 $('#next').html(res);
                             }
                        }
    });
}
}}

和我的PHP代碼刪除行

<?php
include "db-config.php";
if(isset($_POST["page"]) && $_POST["page"] == "delete") 
{
$id=$_POST['userid'];
$sqld="DELETE FROM staff_port WHERE id=".$id;
if(mysqli_query($con,$sqld))
{
    echo "1";
}
else
    echo "2";
}
?>

為什么即使單擊最后一行的刪除按鈕，我的第一行也總是被刪除！

我想在后台執行刪除。

Answer 1

這里的問題是：您正在使用while循環中的元素ID。 因此，您最終在文檔中有多個ID，這是無效的。 因此，jQuery將始終獲得第一個。

我建議以下內容：

• 擺脫內聯onClick -handler並使用適當的事件處理程序
• 使用class -選擇器代替ID
• 將您的usrid值保存到您要單擊的元素中

您的代碼如下：

HTML

<input type='text' class='hidden' name='usridl' id='usrid' value='".$staff_data['id']."' />
<a href='javascript:void(0);' class='delete-row' id='dltbutton' name='btn-dlt' data-usrid='".$staff_data['id']."'><i class='fa fa-trash red'></i></a>

JS

$('.delete-row').on('click', function(){
    if(confirm("Do you really want to delete record ?"))
      {
          var usrid = $(this).data('usrid');
          //all your other stuff
       }
});

---

例

Answer 2

特別是在DOM結構中，每個元素都應該是唯一的，即兩個HTML元素的ID屬性不應相同。 為了刪除HTML表的特定行，在AJAX從數據庫中刪除行之后，只需刪除引用其唯一ID屬性的表行即可。 而不是在刪除后刷新HTML行。 只需檢查是否通過AJAX調用成功刪除了該行，然后將其從HTML表中刪除。

在創建頁面期間，使用一些邏輯為HTML表中的每一行分配唯一的ID屬性。

<tr id="row-<?php $row["id"]; ?>"><td></td></tr>

這將創建DOM中唯一的每一行，並且也可以使用jquery引用該行以將其刪除。 輸出將類似。

<tr id="row-1">
<tr id="row-2">
<tr id="row-3">

Answer 3

您用於刪除的更好的php代碼可能是這樣的：

<?php 
  include "db-config.php";

  if(isset($_POST["page"]) && isset($_POST["userid"]) && $_POST["page"] =="delete") {
      $id=$_POST['userid'];
      $sqld="DELETE FROM staff_port WHERE id='$id'";
      $query=mysqli_query($con,$sqld);

      if($query) {
            echo "1";
      } else {
            echo "2";
      }
  }
?>