ajax crud 编辑和删除仅适用于第一行

Question

我是 AJAX 和 php 的初学者。我有一个问题，他只编辑并删除了第一行。我想我需要在任何地方添加另一个 ID，但我不知道在哪里。

这是我的 HTML

    $sql = "SELECT * FROM crud_gegevens";
    $result = $conn->query($sql);
    while ($row=mysqli_fetch_assoc($result)) {       
         echo '<tr><td><input type="text" id="mod" value="'.$row['naam'].'"></td>';         
         echo '<td><input type="text" id="ctgr" value="'.$row['adres'].'"></td>';
         echo '<td><input type="hidden" id="gegevens_id" value="'.$row['gegevens_id'].'"></td>';
         echo '<td><button type="submit" id="update">update</button></td>';
         echo '<td><button type="submit" id="delete">delete</button></td></tr>';
    }

我的js / ajax是这个

$(document).ready(function(){
    $("#delete").click(function(){
        var id=$("#gegevens_id").val();
        $.ajax({
            url:'delete.php',
            method:'POST',
            data:{
                id:id
            },
            success:function(response){
                alert(response);
            }
        });
    });
});

而我在 php 中的功能是这样的

$id = $_POST["id"];
$sql="DELETE FROM crud_gegevens where gegevens_id='$id'";
if($conn->query($sql)===TRUE){
    echo "DATA deleted";
}

Answer 1

使用 data-id 获取 ajax 中每一行的单独 ID 并将 id="deleteBtn" 用于 jquery

中的点击事件

while ($row=mysqli_fetch_assoc($result)) {       
     echo '<tr><td><input type="text" id="mod" value="'.$row['naam'].'"></td>';         
     echo '<td><input type="text" id="ctgr" value="'.$row['adres'].'"></td>';
     echo '<td><button type="submit" id="update">update</button></td>';
     echo '<td><button type="submit" id="deleteBtn" data-id="'. $row['gegevens_id'] . '">delete</button></td></tr>';
}

不需要额外的隐藏输入字段。

js脚本

$(document).on('click', '#deleteBtn', function(){
var id = $(this).data('gegevens_id');
$.ajax({
    url:'delete.php',
    method:'POST',
    data:{
        id:id
    },
    success:function(response){
        alert(response);
    }
   });
});

ajax crud 编辑和删除仅适用于第一行

ajax crud edit and remove works only on first row

php

ajax

crud