本教程详细介绍了如何利用Bootstrap的data-*属性和JavaScript事件，实现从HTML表格中点击按钮时，将对应行的数据（如电子邮件地址）动态传递给一个单一的Bootstrap模态框，并自动填充模态框内的表单字段。这种方法避免了在循环中重复定义模态框，提高了代码效率和可维护性，确保模态框始终显示正确的数据。
在web应用开发中，尤其是在展示表格数据时，我们经常需要为表格的每一行提供一个操作按钮，点击后弹出一个模态框（modal）来执行编辑、回复等操作。一个常见的问题是，无论点击哪一行的按钮，模态框中的表单字段总是显示相同（通常是第一行）的数据。这是因为模态框的html结构被重复定义在循环中，或者没有正确地将动态数据传递给模态框中的表单元素。
本教程将提供一种高效且推荐的解决方案：将模态框定义为单一实例，并利用Bootstrap的JavaScript事件和HTML5的data-*属性来动态填充模态框中的数据。
核心原理
实现动态数据传递的核心在于以下两点：
- *`data-属性：** 在触发模态框的按钮（或其他元素）上，使用data-bs-whatever（或其他自定义data-*`属性）来存储需要传递的动态数据。
- Bootstrap模态框事件： 监听Bootstrap模态框的show.bs.modal事件。当模态框即将显示时，此事件会被触发，并且可以通过event.relatedTarget属性获取到触发模态框的那个按钮元素。然后，我们可以从该按钮的data-*属性中提取所需数据，并将其填充到模态框内的表单字段中。
实现步骤
1. HTML表格结构与动态数据传递
首先，我们需要在PHP循环中构建表格行，并在每个“回复”按钮上嵌入对应的电子邮件地址。这里，我们利用Bootstrap的data-bs-target和data-bs-toggle属性来指定要触发的模态框，并使用data-bs-whatever属性来传递当前行的电子邮件地址。
<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>
注意： 在输出动态数据时，使用htmecialchars()函数进行转义，以防止跨站脚本（XSS）攻击。
2. Bootstrap模态框的定义
模态框的HTML结构应该只定义一次，并且位于PHP循环之外。模态框内部包含用于接收动态数据的表单字段，例如一个用于显示收件人的输入框。
<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>
注意：
- 模态框的id (exampleModal) 必须与触发按钮的data-bs-target值匹配。
- 为收件人邮箱添加一个id (recipient-eml)，方便JavaScript操作。
- 将收件人邮箱输入框设置为readonly，通常预填充的邮箱不希望用户随意修改。
3. JavaScript数据填充逻辑
这是实现动态数据填充的关键步骤。我们需要编写JavaScript代码来监听模态框的show.bs.modal事件。当事件触发时，获取触发按钮的data-bs-whatever属性值，并将其设置到模态框中对应的输入字段。
// 获取模态框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; });
将这段JavaScript代码放置在HTML文件的<script>标签中，通常在</script>
以上就是如何实现Bootstrap模态框动态获取表格行数据并填充表单的详细内容，更多请关注php中文网其它相关文章！
微信扫一扫打赏
支付宝扫一扫打赏
