点击垃圾桶按钮删除数据库关联ID数据的实现问题

问题核心 #

你点击垃圾桶按钮无法删除对应ID的数据，并非trash图标本身没用，而是代码存在ID传递错误和点击事件未绑定的问题，导致删除逻辑没被正确触发。

修复步骤 #

1. 修正按钮的ID输出错误

原代码里data-id属性的PHP嵌套写法错误，导致ID没有正确渲染到页面上，直接拼接$row["id"]即可。

2. 给删除按钮绑定点击事件

需要给.deleteBtn按钮添加点击事件，触发deleteRow函数并传递对应行的ID。

3. 优化PHP删除逻辑（可选但推荐）

原PHP用字符串拼接SQL存在注入风险，改用预处理语句更安全。

修改后的完整代码 #

列表页面的按钮部分（修正ID输出和事件绑定）

<?php
require_once 'connection.php';
require_once 'count.php';  

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo '<tr>';
        echo '<th scope="row">' . $row["id"] . '</th>';
        echo '<td><img src="' . $row["image_url"] . '" class="user-photo" alt="' . $row["name"] . ' Photo">' . $row["name"] . '</td>';
        echo '<td>' . $row["date"] . '</td>';
        echo '<td>' . $row["role"] . '</td>';
        echo '<td><i class="fa-solid fa-circle" style="color: ' . $row["status_color"] . ';"> </i> ' . $row["status"] . '</td>';
        echo '<td>
                <button>
                    <i class="fa-solid fa-pen" style="color: #0a0a0a;"></i>
                </button>
                <button class="deleteBtn" data-id="' . $row["id"] . '">
                    <i class="fa-solid fa-trash" style="color: #48b180;"></i>
                </button>
            </td>';
        echo '</tr>';
    }
} else {
    echo "<tr><td colspan='6'>0 sonuç</td></tr>";
}
$conn->close();
?>

<script>
// 给所有删除按钮绑定点击事件
document.querySelectorAll('.deleteBtn').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.getAttribute('data-id');
        deleteRow(id);
    });
});

function deleteRow(id) {
    if (confirm("Bu satırı silmek istediğinizden emin misiniz?")) {
        window.location.href = "delete.php?id=" + id;
    }
}
</script>

删除处理页面（delete.php，优化为预处理语句）

<?php
require_once 'connection.php'; 

function urunSilme($id) {
    global $conn; 

    // 使用预处理语句规避SQL注入风险
    $sql = "DELETE FROM formbilgileri WHERE id=?";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "i", $id); // "i"表示ID为整数类型

    if (mysqli_stmt_execute($stmt)) {
        echo "Veri başarıyla silindi";
        // 删除后自动跳回列表页（替换为你的列表页面URL）
        header("Location: your-list-page.php");
        exit;
    } else {
        echo "Silme işlemi başarısız: " . mysqli_error($conn);
    }
    mysqli_stmt_close($stmt);
}

// 验证ID为有效数字
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    urunSilme($_GET['id']);
} else {
    echo "Geçersiz ID değeri";
}
$conn->close();
?>

验证方法 #

1. 打开浏览器控制台（F12），检查删除按钮的data-id属性是否正确显示对应行的ID
2. 点击删除按钮，确认弹窗出现，点击确认后会执行删除逻辑，返回列表页即可验证数据是否已删除

内容的提问来源于stack exchange，提问作者Tufancan Demirkılıç