如何实现Bootstrap模态框动态获取表格行数据并填充表单

<table class="table table-striped table-responsive">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">姓名</th>
            <th scope="col">邮箱</th>
            <th scope="col">主题</th>
            <th scope="col">消息</th>
            <th scope="col">时间</th>
            <th scope="col">操作</th>
        </tr>
    </thead>
    <tbody>
        <?php
        // 假设 $conn 是已建立的数据库连接
        $sql = "SELECT id, name, email, subject, message, time FROM contact";
        $records = mysqli_query($conn, $sql);

        while ($data = mysqli_fetch_array($records)) {
        ?>
            <tr>
                <td><?php echo htmlspecialchars($data['id']); ?></td>
                <td><?php echo htmlspecialchars($data['name']); ?></td>
                <td><?php echo htmlspecialchars($data['email']); ?></td>
                <td><?php echo htmlspecialchars($data['subject']); ?></td>
                <td><?php echo htmlspecialchars($data['message']); ?></td>
                <td><?php echo htmlspecialchars($data['time']); ?></td>
                <td>
                    <!-- 触发模态框的按钮，使用 data-bs-whatever 传递邮箱地址 -->
                    <button type="button" class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModal"
                            data-bs-whatever="<?php echo htmlspecialchars($data['email']); ?>">
                        回复
                    </button>
                </td>
            </tr>
        <?php
        }
        ?>
    </tbody>
</table>

<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="col-md-12 mb-3">
                            <label for="recipient-email" class="col-form-label">收件人:</label>
                            <!-- 注意：这里的name属性应与PHP处理时获取的字段名一致 -->
                            <input type="email" class="form-control" name="email" id="recipient-email" readonly>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="email-subject" class="col-form-label">邮件主题:</label>
                            <input type="text" class="form-control" name="subject" id="email-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-text"></textarea>
                        </div>

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

// 获取模态框DOM元素
var exampleModal = document.getElementById('exampleModal');

// 监听模态框的 show.bs.modal 事件
exampleModal.addEventListener('show.bs.modal', function (event) {
    // 获取触发模态框的按钮
    var button = event.relatedTarget; // `relatedTarget` 是触发模态框的 DOM 元素

    // 从按钮的 data-bs-whatever 属性中提取数据
    var recipientEmail = button.getAttribute('data-bs-whatever');

    // 获取模态框中的标题和收件人输入框
    var modalTitle = exampleModal.querySelector('.modal-title');
    var recipientInput = exampleModal.querySelector('#recipient-email'); // 根据ID获取收件人输入框

    // 更新模态框的标题和收件人输入框的值
    modalTitle.textContent = '回复邮件给 ' + recipientEmail;
    recipientInput.value = recipientEmail;
});

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

// 确保PHPMailer库已通过Composer安装并自动加载，或手动引入
// require 'vendor/autoload.php'; // 如果使用Composer

if (isset($_POST['submit'])) {
    $mail = new PHPMailer(true);
    try {
        // SMTP配置
        $mail->IsSMTP();
        $mail->SMTPDebug = 0; // 设置为0表示不输出调试信息
        $mail->Host = 'smtp.gmail.com'; // 邮件服务器地址
        $mail->SMTPAuth = true; // 启用SMTP认证
        $mail->Username = "your_email@gmail.com"; // 你的邮箱地址
        $mail->Password = "your_app_password"; // 你的邮箱应用专用密码
        $mail->SMTPSecure = 'tls'; // 加密方式，根据服务器要求选择 'ssl' 或 'tls'
        $mail->Port = 587; // 端口号，TLS通常是587，SSL通常是465

        // 发件人信息
        $mail->setFrom("your_email@gmail.com", "Your Name"); // 发件人邮箱和名称

        // 收件人信息，从表单中获取
        $recipientEmail = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL); // 过滤邮箱地址
        if (!empty($recipientEmail) && filter_var($recipientEmail, FILTER_VALIDATE_EMAIL)) {
            $mail->addAddress($recipientEmail); // 添加收件人
        } else {
            throw new Exception("无效的收件人邮箱地址。");
        }

        // 邮件内容
        $mail->isHTML(true); // 设置邮件格式为HTML
        $mail->Subject = htmlspecialchars($_POST['subject']); // 邮件主题
        $mail->Body = nl2br(htmlspecialchars($_POST['message'])); // 邮件内容，保留换行

        // 处理附件
        if (isset($_FILES['file']) && is_array($_FILES['file']['tmp_name'])) {
            for ($i = 0; $i < count($_FILES['file']['tmp_name']); $i++) {
                if ($_FILES['file']['error'][$i] == UPLOAD_ERR_OK) {
                    $mail->addAttachment($_FILES['file']['tmp_name'][$i], $_FILES['file']['name'][$i]);
                }
            }
        }

        $mail->send();
        echo '您的消息已成功发送！';
    } catch (Exception $e) {
        echo "您的消息未能发送！PHPMailer 错误: {$mail->ErrorInfo}";
    }
} else {
    // 如果不是通过POST提交，可以进行其他处理或提示
    // echo "请通过表单提交邮件。";
}
?>