没问题，我来帮你实现点击编辑按钮后在Bootstrap模态框中加载对应职位安置数据的功能，咱们一步步来：

前提准备 #

确保你的页面已经引入了Bootstrap的CSS、JS文件，以及jQuery（如果用jQuery方案的话），这是Bootstrap模态框正常工作的基础。

步骤1：添加Bootstrap模态框HTML结构 #

先在页面中插入模态框的结构，表单字段对应你的placements表字段（这里我假设几个常见字段，你可以根据实际表结构调整）：

<!-- 编辑职位安置的模态框 -->
<div class="modal fade" id="editPlacementModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">编辑职位安置信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="editPlacementForm">
          <!-- 隐藏域存储当前记录ID，用于后续更新 -->
          <input type="hidden" id="placementId">
          <div class="mb-3">
            <label for="placementName" class="form-label">姓名</label>
            <input type="text" class="form-control" id="placementName">
          </div>
          <div class="mb-3">
            <label for="placementCompany" class="form-label">公司名称</label>
            <input type="text" class="form-control" id="placementCompany">
          </div>
          <div class="mb-3">
            <label for="placementDate" class="form-label">安置日期</label>
            <input type="date" class="form-control" id="placementDate">
          </div>
          <!-- 根据你的`placements`表字段，添加更多表单元素 -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="saveEditBtn">保存修改</button>
      </div>
    </div>
  </div>
</div>

步骤2：修改表格循环，给编辑按钮绑定数据 #

在你生成表格<tbody>的PHP循环中，给每行的编辑按钮添加data-*属性，把当前行的数据库字段值存进去（注意用htmlspecialchars防止XSS攻击）：

<?php if ($placements) { 
    foreach ($placements as $placement) { ?>
    <tr>
        <td><?php echo htmlspecialchars($placement['id']); ?></td>
        <td><?php echo htmlspecialchars($placement['name']); ?></td>
        <td><?php echo htmlspecialchars($placement['company']); ?></td>
        <td><?php echo htmlspecialchars($placement['placement_date']); ?></td>
        <td>
            <!-- 编辑按钮：添加data属性存储当前行数据，同时绑定模态框触发事件 -->
            <button type="button" class="btn btn-sm btn-warning edit-placement-btn"
                    data-id="<?php echo $placement['id']; ?>"
                    data-name="<?php echo htmlspecialchars($placement['name']); ?>"
                    data-company="<?php echo htmlspecialchars($placement['company']); ?>"
                    data-placement-date="<?php echo $placement['placement_date']; ?>"
                    data-bs-toggle="modal" data-bs-target="#editPlacementModal">
                编辑
            </button>
        </td>
    </tr>
<?php } 
} ?>

步骤3：编写JavaScript填充模态框数据 #

添加这段JS代码到页面底部（或外部JS文件），监听编辑按钮的点击事件，将数据填充到模态框表单中：

// 原生JS方案
document.querySelectorAll('.edit-placement-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 从按钮的data属性中获取数据
        const placementId = this.getAttribute('data-id');
        const placementName = this.getAttribute('data-name');
        const placementCompany = this.getAttribute('data-company');
        const placementDate = this.getAttribute('data-placement-date');

        // 将数据填充到模态框的表单元素中
        document.getElementById('placementId').value = placementId;
        document.getElementById('placementName').value = placementName;
        document.getElementById('placementCompany').value = placementCompany;
        document.getElementById('placementDate').value = placementDate;
    });
});

// 如果你用jQuery，代码会更简洁：
// $(document).on('click', '.edit-placement-btn', function() {
//     $('#placementId').val($(this).data('id'));
//     $('#placementName').val($(this).data('name'));
//     $('#placementCompany').val($(this).data('company'));
//     $('#placementDate').val($(this).data('placement-date'));
// });

进阶方案：通过AJAX获取数据（避免数据暴露在HTML中） #

如果不想把数据库数据直接写在HTML的data-*属性里，可以通过AJAX请求后端接口获取单条数据：

1. 新建一个PHP接口文件（比如get_single_placement.php）：

<?php
// 数据库连接（复用你原来的连接代码）
$con = mysqli_connect('localhost', '你的用户名', '你的密码', '你的数据库名');

if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    $placementId = intval($_GET['id']);
    $sql = 'SELECT * FROM placements WHERE id = ?';
    $statement = $con->prepare($sql);
    $statement->bind_param('i', $placementId);
    $statement->execute();
    $result = $statement->get_result();
    $placement = $result->fetch_assoc();

    // 返回JSON格式的数据
    echo json_encode($placement);

    // 释放资源
    $result->close();
    $statement->close();
}
$con->close();
?>

2. 修改JavaScript代码，点击按钮时发送AJAX请求：

document.querySelectorAll('.edit-placement-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const placementId = this.getAttribute('data-id');
        
        // 发送AJAX请求获取单条数据
        fetch(`get_single_placement.php?id=${placementId}`)
            .then(response => response.json())
            .then(data => {
                // 填充模态框表单
                document.getElementById('placementId').value = data.id;
                document.getElementById('placementName').value = data.name;
                document.getElementById('placementCompany').value = data.company;
                document.getElementById('placementDate').value = data.placement_date;
            })
            .catch(error => console.error('获取数据失败：', error));
    });
});

这样点击编辑按钮时，模态框就会自动加载对应行的数据库数据啦。

内容的提问来源于stack exchange，提问作者satya dasari