时间戳

首页 > 解决方案 > 如何使用模态在表中显示数据库中的数据

html - 如何使用模态在表中显示数据库中的数据

问题描述

我希望我的表格中的数据可以点击并以模式显示。然后获取该数据的 id（从表中）并以该模式显示数据库中的其余数据。

我试过按照这个但它不起作用，我不知道为什么 

            <table class="table table-hover table-bordered results" style="color:white;">
               <thead>
                <tr>
                  <th>Contact #</th>
                  <th>Picture</th>
                  <th >Name / Surname</th>
                  <th >Address</th>
                 </tr>
                <tr class="warning no-result">
                  <td colspan="4"><i class="fa fa-warning"></i> No result</td>
                </tr>
              </thead>
              <tbody>
                  <?php   
                        $sqlb = "select * from debtors  ";
                        $resultb = $conn->query($sqlb);
                        while($rowb = $resultb->fetch_assoc()){
                        $id=$rowb['contact #']; 
                  ?>

                <tr a class="dropdown-item"  data-toggle="modal" data-target="#logoutModal" style="color:white;">
                  <td><?php echo $rowb['contact #']; ?></td>
                  <td><?php echo $rowb['lname']; ?></td>
                  <td><?php echo $rowb['fname']; ?></td>
                  <td><?php echo $rowb['address']; ?></td></a>
                </tr>
              <?php } ?>
              </tbody>
            </table>

          </div>

          <!-- Logout Modal-->
<span>      
      <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"></h5>
              <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">x</span>
              </button>
            </div>
            <div class="modal-body"><?php echo $rowb['lname']; ?>, <?php echo $rowb['fname']; ?><BR>
<?php echo $rowb['balance']; ?>
            </div>
            <div class="modal-footer">
              <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
              <a class="btn btn-info" href="admin_logout.php">Yes</a>
            </div>
          </div>
        </div>
      </div>
</span>

我希望我的表格行在单击时显示模态，然后在该模态中显示与数据库中单击的行相关的数据

标签： htmlmysqlbootstrap-modaljscript

解决方案

首先，模态不在循环中，因此您无法$rowb在模态中访问，其次，这不是正确的方法，因为在将模态放入循环后，它会创建这么多（数百或数千个）模态，性能不佳明智的。

正确的方法是，创建一个模态并将一个类分配给按钮并将数字 id 放入id属性中，然后单击该按钮进行 ajax 调用并获取数据并将其显示在模态中。通过这种方式，单个模态将动态地向您显示正确的数据。

推荐阅读