高效实现Bootstrap表格与模态框数据联动的教程

<?php
    // ... (数据库查询和连接代码)
    while($data = mysqli_fetch_array($records)) {
?>
    <tbody>
        <tr>
            <td><?php echo $data['id']; ?></td>
            <td><?php echo $data['name']; ?></td>
            <td><?php echo $data['email']; ?></td>
            <td><?php echo $data['subject']; ?></td>
            <td><?php echo $data['message'];?></td>
            <td><?php echo $data['time']; ?></td>
            <td><a href="reply.php">reply</a></td>
            <td>
                <!-- 确保 data-bs-whatever 属性正确绑定了当前行的 email -->
                <button type="button" name="submit" class="btn btn-primary"
                        data-bs-toggle="modal" data-bs-target="#exampleModal"
                        data-bs-whatever="<?php echo htmlspecialchars($data['email']); ?>">
                    Reply
                </button>
            </td>
        </tr>
    </tbody>
<?php
    } // 结束 while 循环
?>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新消息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" role="form" enctype="multipart/form-data" action="">
                    <div class="row">
                        <!-- 新增：收件人邮箱输入框 -->
                        <div class="mb-3">
                            <label for="recipient-email" class="col-form-label">收件人邮箱:</label>
                            <input type="text" class="form-control" name="email" id="recipient-email" readonly>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="Email-Subject" class="col-form-label">邮件主题:</label>
                            <input type="text" class="form-control" name="subject" id="subject">
                        </div>

                        <div class="mb-3">
                            <label for="message-text" class="col-form-label">消息内容:</label>
                            <textarea class="form-control" rows="8" name="message" id="message"></textarea>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="attachment" class="col-form-label">附件</label>
                            <input type="file" class="form-control" name="file[]" multiple="multiple" id="file">
                        </div>
                    </div>
                    <button name="submit" type="submit" class="btn btn-primary">发送邮件</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jQuery (如果项目中使用) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 Bootstrap 5 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // 使用 jQuery 监听模态框的 show.bs.modal 事件
    $('#exampleModal').on('show.bs.modal', function (event) {
        // 获取触发模态框的按钮
        var button = $(event.relatedTarget); // jQuery 对象

        // 从 data-bs-whatever 属性中提取数据
        var recipient = button.data('bsWhatever'); // 使用 .data() 方法获取 data-* 属性值

        // 获取模态框内的收件人邮箱输入框
        var modal = $(this); // 当前模态框的 jQuery 对象
        var recipientInput = modal.find('#recipient-email');

        // 将获取到的邮箱地址填充到输入框中
        recipientInput.val(recipient);

        // 可选：更新模态框标题，使其更具上下文
        // var modalTitle = modal.find('.modal-title');
        // modalTitle.text('回复给: ' + recipient);
    });
</script>

<?php
    use PHPMailer\PHPMailer\PHPMailer;
    use PHPMailer\PHPMailer\Exception;

    if(isset($_POST['submit'])) {
        $mail = new PHPMailer(true);
        $mail->IsSMTP();
        $mail->SMTPDebug = 0; // 设置为 0 不显示调试信息
        $mail->Host = 'smtp.gmail.com';
        $mail->SMTPAuth = true;
        $mail->Username = "your_email@gmail.com"; // 替换为你的发件邮箱
        $mail->Password = "your_app_password"; // 替换为你的邮箱应用密码
        $mail->SMTPSecure = 'tls';
        $mail->Port = 587;
        $mail->setFrom("your_email@gmail.com"); // 替换为你的发件邮箱
        $mail->addAddress($_POST['email']); // 从 POST 数据中获取收件人邮箱
        $mail->isHTML(true);    
        $mail->Subject = $_POST['subject'];
        $mail->Body = $_POST['message'];

        // 处理附件
        if (isset($_FILES['file']) && is_array($_FILES['file']['tmp_name'])) {
            for ($i = 0; $i < count($_FILES['file