javascript - 使用 id 从表中删除特定行并使用 Jquery Ajax php mysql 在后台刷新同一个表

Question

我构建了一个动态 html 表，它从 mysql 表中获取数据。 我可以显示表格内容。但是当我试图删除第 2、3、4 等行(除第 1 行以外的任何行)时，我的第一行总是只被删除

这是我的 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 处理程序并使用适当的事件处理程序
• 使用类 - 选择器而不是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
       }
});

---

Example