问题背景与分析
在开发基于Bootstrap的Web应用时，我们经常需要实现表格中每行数据对应的“操作”按钮（例如“回复”、“编辑”）点击后，弹出一个模态框（Modal），并自动填充该行特定数据（如邮件地址、用户ID等）到模态框的表单中。然而，一个常见的问题是，无论点击哪一行的按钮，模态框中显示的数据始终是表格中第一行的数据。
分析原始代码，我们可以发现以下几点：
- 模态框的定义位置： 原始代码中，模态框（<div class="modal fade" id="exampleModal"...>) 是定义在PHP while 循环之外的。这是一个正确的做法，因为模态框通常只需要在页面中定义一次，并通过JavaScript动态控制其内容。如果将模态框定义在循环内部，会导致页面上有多个具有相同ID的模态框，这会引发JavaScript选择器混淆，从而导致不可预测的行为。
- 数据传递机制： 触发模态框的按钮 (<button ... data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="<?php echo $data['email'];?>">Reply</button>) 已经正确地使用了Bootstrap 5的 data-bs-whatever 属性来传递当前行的邮件地址。这个属性的值会在模态框的 show.bs.modal 事件中作为 event.relatedTarget 的 dataset 属性被访问。
- 模态框内部表单缺失与动态填充： 原始模态框的HTML结构中，缺少一个明确用于接收“收件人邮箱”的输入字段。虽然有“Email-Subject”等字段，但没有直接用于显示从表格行中获取的邮件地址的字段。更重要的是，即使存在该字段，也缺乏必要的JavaScript代码来监听模态框的显示事件，并根据 data-bs-whatever 属性的值来动态填充这个输入字段。这才是导致模态框始终显示“第一个邮箱”或不显示正确邮箱的根本原因。
解决方案核心思路
解决上述问题的核心在于：
- 确保模态框的单一性： 模态框的HTML结构应只在页面中定义一次，且位于PHP循环之外。
- 利用data-bs-whatever传递数据： 在触发模态框的按钮上，通过 data-bs-whatever 属性将需要传递的动态数据（例如当前行的邮箱地址）绑定到按钮上。
- 在模态框中添加接收字段： 在模态框的表单内部，添加一个专用的输入字段，用于接收并显示从 data-bs-whatever 传递过来的数据。
- JavaScript动态填充： 使用JavaScript（推荐结合jQuery以简化DOM操作）监听Bootstrap模态框的 show.bs.modal 事件。在该事件触发时，获取触发模态框的按钮元素，读取其 data-bs-whatever 属性的值，然后将该值填充到模态框内对应的输入字段中。
具体实现步骤
步骤一：优化HTML结构
首先，我们需要在模态框的表单中添加一个用于显示收件人邮箱的输入字段。为了防止用户随意修改，可以将其设置为 readonly。
表格按钮部分 (PHP while 循环内部): 这部分保持不变，因为它已经正确设置了 data-bs-whatever 属性。
<?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 循环
?>注意： 建议使用 htmlspecialchars() 对从数据库中取出的数据进行编码，以防止XSS攻击。
模态框部分 (HTML结构，位于PHP循环外部): 在 modal-body 内添加一个用于显示收件人邮箱的 input 字段，并为其指定一个唯一的 id (例如 recipient-email) 和 name 属性（用于表单提交）。
<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>步骤二：添加JavaScript逻辑
接下来，我们需要编写JavaScript代码来监听模态框的 show.bs.modal 事件，并动态填充 recipient-email 字段。确保在页面加载Bootstrap JavaScript文件之后引入此脚本。通常，这会放在 </body> 标签之前。
<!-- 引入 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 Mailer集成
PHP Mailer 部分的代码无需修改，因为它会通过 $_POST['email'] 获取收件人邮箱。只要前端的JavaScript正确地将邮箱地址填充到 name="email" 的输入字段中，PHP Mailer就能正确接收并使用该地址。
<?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 
