PHP实现编辑弹窗数据填充、数据库与HTML表格数据同步更新的问题咨询（附现有代码）

嘿，作为刚入门PHP的新手，能写出增删查的代码已经超棒啦！我看你现在卡在数据更新这一步——想要点击编辑后把对应数据填充到弹窗里，修改后同步更新数据库，还要让页面的HTML表格也跟着刷新对吧？先把你贴的现有代码整理完整，咱们一步步来解决问题~

你当前的现有代码（整理后） #

<?php
require '../connect.php';

// 新增课程
if (isset($_POST['addCourse'])) {
    $courseName = $_POST['courseName'];
    $semesters = $_POST['semesters'];

    $insertQuery = "INSERT INTO courses(course_name, semester) VALUES('$courseName', '$semesters')";
    if ($conn->query($insertQuery) == TRUE) {
        header("location: course.php");
    } else {
        echo "Error:" . $conn->error;
    }
}

// 显示课程到表格
$showData = " SELECT * FROM courses";
$result = $conn->query($showData);

// 删除课程
if (isset($_GET['id'])) {
    $id = $_GET['id'];
    $query = "DELETE FROM `courses` WHERE id = '$id'";
    $run = mysqli_query($conn, $query);
    if ($run) {
        header('location:course.php');
    } else {
        echo "删除失败：" . $conn->error;
    }
}

// 新增：处理课程更新逻辑
if (isset($_POST['updateCourse'])) {
    $id = $_POST['editId'];
    $newCourseName = $_POST['editCourseName'];
    $newSemester = $_POST['editSemesters'];
    
    // 改用预处理语句，避免SQL注入风险！
    $updateQuery = "UPDATE courses SET course_name = ?, semester = ? WHERE id = ?";
    $stmt = $conn->prepare($updateQuery);
    $stmt->bind_param("ssi", $newCourseName, $newSemester, $id);
    
    if ($stmt->execute()) {
        header("location: course.php");
    } else {
        echo "更新失败：" . $stmt->error;
    }
    $stmt->close();
}
?>

<!-- HTML部分（包含新增表单、数据表格、编辑弹窗） -->
<!DOCTYPE html>
<html>
<head>
    <title>课程管理</title>
    <style>
        /* 简单的弹窗样式，不用框架也能实现 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content {
            background-color: white;
            margin: 15% auto;
            padding: 20px;
            width: 300px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <!-- 新增课程表单 -->
    <h3>新增课程</h3>
    <form method="POST">
        <input type="text" name="courseName" placeholder="课程名称" required>
        <input type="number" name="semesters" placeholder="学期数" required>
        <button type="submit" name="addCourse">新增</button>
    </form>

    <!-- 课程数据表格 -->
    <h3>课程列表</h3>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>课程名称</th>
            <th>学期数</th>
            <th>操作</th>
        </tr>
        <?php
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo "<tr>
                        <td>".$row["id"]."</td>
                        <td>".$row["course_name"]."</td>
                        <td>".$row["semester"]."</td>
                        <td>
                            <button onclick='openEditModal(".$row["id"].", \"".$row["course_name"]."\", ".$row["semester"].")'>编辑</button>
                            <a href='course.php?id=".$row["id"]."' onclick='return confirm(\"确定要删除吗？\")'>删除</a>
                        </td>
                      </tr>";
            }
        } else {
            echo "<tr><td colspan='4'>暂无课程数据</td></tr>";
        }
        ?>
    </table>

    <!-- 编辑课程的模态弹窗 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <h4>编辑课程</h4>
            <form method="POST">
                <input type="hidden" name="editId" id="editId">
                <input type="text" name="editCourseName" id="editCourseName" required>
                <input type="number" name="editSemesters" id="editSemesters" required>
                <button type="submit" name="updateCourse">保存修改</button>
                <button type="button" onclick="closeEditModal()">取消</button>
            </form>
        </div>
    </div>

    <!-- 弹窗填充与控制的JS -->
    <script>
        function openEditModal(id, courseName, semester) {
            // 把对应数据填充到弹窗表单里
            document.getElementById("editId").value = id;
            document.getElementById("editCourseName").value = courseName;
            document.getElementById("editSemesters").value = semester;
            // 显示弹窗
            document.getElementById("editModal").style.display = "block";
        }

        function closeEditModal() {
            document.getElementById("editModal").style.display = "none";
        }

        // 点击弹窗外部关闭
        window.onclick = function(event) {
            var modal = document.getElementById("editModal");
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>

给你的几个关键提示（新手必看） #

1. SQL注入风险：你原来的增删查代码都是直接把用户输入拼到SQL里，非常危险！上面的更新逻辑我改用了PHP预处理语句（prepare+bind_param），建议你把新增、删除的代码也改成预处理语句，比如删除可以改成：

if (isset($_GET['id'])) {
    $id = $_GET['id'];
    $query = "DELETE FROM `courses` WHERE id = ?";
    $stmt = $conn->prepare($query);
    $stmt->bind_param("i", $id);
    $run = $stmt->execute();
    if ($run) {
        header('location:course.php');
    } else {
        echo "删除失败：" . $stmt->error;
    }
    $stmt->close();
}

2. 弹窗数据填充：通过JS的openEditModal函数，点击编辑按钮时把当前行的ID、课程名、学期数传进去，然后赋值给弹窗里的输入框，这样打开弹窗就自动填好原来的数据了。
3. 更新后同步表格：因为更新后用了header("location: course.php")跳转回当前页面，页面会重新执行查询逻辑，所以表格会自动刷新显示最新数据。
4. 用户体验优化：给删除按钮加了确认提示，避免误删；弹窗点击外部也能关闭，更符合用户习惯。

如果还有哪里卡壳，随时说哦！

备注：内容来源于stack exchange，提问作者Shaikh Ab