尝试打开具有特定用户 ID 的模式答案

【问题标题】：Trying to open a modal with specific user ids尝试打开具有特定用户 ID 的模式
【发布时间】：2021-01-28 04:26:15
【问题描述】：

我已经与一些员工制作了一张表格，我正在使用模式来添加新/详细信息/编辑/删除。

我不知道如何为特定用户打开详细信息模式...[USING BOOTSTRAP 5]。

这是按钮：

<td method="MODAL"><button type="button" class="btn btn-sm btn-block btn-info" data-id="<?php echo $employee['e_id']; ?>" data-toggle="modal" data-target="#designerDetails">Details</button></td>

这里是模态：

<div class="modal fade" id="designerDetails" data-e-id="<?php echo $employee['e_id']; ?>" tabindex="-1" aria-labelledby="designerDetails" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Designer details</h5>
      <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
         <table class="table">
         <?php            
                          $sql = "SELECT * FROM employees";
                           $result = mysqli_query($conn, $sql);

                           if (mysqli_num_rows($result) > 0) {
                            while($employee = mysqli_fetch_assoc($result)) { ?>
             <tr>
                 <th>ID</th>
                 <td><?php echo $employee['e_id']; ?></td>
             </tr>
             <tr>
                 <th>Name</th>
                 <td><?php echo $employee['e_name']; ?></td>
             </tr>
             <tr>
                 <th>Email adress</th>
                 <td><?php echo $employee['e_email']; ?></td>
             </tr>
             <tr>
                 <th>Phone number</th>
                 <td><?php echo $employee['e_phone']; ?></td>
             </tr>
             <?php         
                           }      
                              } else {
                                  echo "0 results";
                              }

                      ?>
         </table>
    </div>
  </div>
</div>

【问题讨论】：

这里唯一的问题是我是后端的初学者，我唯一知道要做的就是用php制作登录/注册页面并将它们存储到mysql中......所以我想我会留下来重定向到具有唯一用户 ID 的新页面以显示详细信息或编辑它们，直到我学习一些高级技术。

标签： javascript php html jquery css

【解决方案1】：

您可以通过以下方式进行操作。但是如果你有很多数据，这种方法不适合你可能必须使用aJax来加载数据。

<td><button type="button" class="btn btn-sm btn-block btn-info " data-id="<?php echo $employee['e_id']; ?>" data-name="<?php echo $employee['e_name']; ?>" data-email="<?php echo $employee['e_email']; ?>" data-phone="<?php echo $employee['e_phone']; ?>" 
>Details</button></td>

模态

<div class="modal fade" id="designerDetails" tabindex="-1" aria-labelledby="designerDetails" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Designer details</h5>
      <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
         <table class="table">
             <tr>
                 <th>ID</th>
                 <td id="e_id"></td>
             </tr>
             <tr>
                 <th>Name</th>
                 <td id="e_name"></td>
             </tr>
             <tr>
                 <th>Email adress</th>
                 <td id="e_email"></td>
             </tr>
             <tr>
                 <th>Phone number</th>
                 <td id="e_phone"></td>
             </tr>
         </table>
    </div>
  </div>
</div>

Javascript

$(document).on('click','.designerDetails', function(event) { 
    $('#e_id').html($(this).data('id'));
    $('#e_name').html($(this).data('name'));
    $('#e_email').html($(this).data('email'));
    $('#e_phone').html($(this).data('phone'));
    $('#designerDetails').modal('show');
});

【讨论】：