Php 如何在带有动态数据的while循环中使用Modal

代码工作正常，但输出不可接受。这是在代码中给出的。代码为每个模式提供有效数据，但输出斜杠除外

提前感谢您的帮助

<?php 
include("../db_connect.php");      
$sql="select * from notifications where userid='$uid' or rec_id='$uid'";
$result=mysqli_query($con,$sql);
?>
<div class="col-sm-10">
<table class="table table-striped ">
<thead style="background-color:skyblue;">
<td></td><td></td><td></td><td></td><td><h3><i  class="fa fa-cogs"></i>Notifications</h3></td><td></td><td></td><td></td></thead>
<thead style="background-color:wheet;" class="table-bordered">
<tr>
<td><b>Sr.No.</b></td>
<td><b>From</b></td>
<td><b>Recevier</b></td>
<td><b>Amount</b></td>
<td><b>Details</b></td>
<td><b>Date</b></td>
<td><b>User Info</b></td>
<td><b>Status</b></td>
</tr>
</thead>
<tbody class="table-bordered ">
    <?php
    if($result)
    {
        $i=1;
        while($row = $result->fetch_assoc()) {

       $sql12="select * from users inner join bank_details on users.userid=bank_details.userid  where users.userid='".$row['rec_id']."'";
       $result12=mysqli_query($con,$sql12);
       $row1 = $result12->fetch_assoc();


            echo "<tr><td>".$i."</td><td>".$row['userid']."</td><td>".$row['rec_id']."</td><td>".$row['amount']."</td><td>".$row['details']."</td><td>".$row['date1']."</td>";
            if($uid == $row['rec_id'])
            {
                echo "<td><button class='btn btn-warning' disabled data-toggle='modal' data-target='#myModal".$i."'>View</button></td>";

            }
            else
            {
            echo "<td><button class='btn btn-success'  data-toggle='modal' data-target='#myModals".$i."'>View</button></td>";   
            }
            if($uid == $row['userid'])
            {
                if($row['status']=="pending")
                {
                echo "<td><button class='btn btn-info' disabled id='sndr'>Pending to Accept</button></td></tr>";
                }
                else if($row['status']=="accepted")
                {
                    echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td></tr>";
                }
                else
                {
                    echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td></tr>";
                }
            }
            else
            {
                if($row['status']=="pending" )
                {
                ?>
                <td>
                 <form role="form">
                    <div class="form-group">
    <select class="form-control" id="sel1"  >
    <option>Select</option>
    <option value="accepted" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-success"> Accept</span></option>
    <option value="rejected" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-danger">Reject</span></option>
  </select>
  </div>
  </form>
  </td>
  </tr>
  <?php
                }
                    else if($row['status']=="accepted")
                    {
                        echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td></tr>";
                    }
                    else{
                        echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td></tr>";
                    }
            }

            ?>
            <div    class='modal fade' id='<?php echo "myModals".$i.""; ?>' role='dialog' tabindex="-1" aria-hidden="true">
<div class="modal-dialog" >

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header" style="background-color:green;padding:10px;">
      <button type="button" class="close" data-dismiss="modal" >&times;</button>
      <center>
      <h4 class="modal-title" align="center" style="color:white;">User Details</h4>
      </center>
    </div>
    <div class="modal-body" style="padding:10px;">


            <table class='table table-striped'>

            <thead>
            <tr><td><h4 style='color:blue;'></b>User Details:</b></h4></td><td></td></tr>
            </thead>
            <tbody>
            <tr><td><b>User Id:</b></td><td><?php echo $row1['userid']; ?></td></tr>
            <tr><td><b>Name:</b></td><td><?php echo $row1['name']; ?></td></tr>
            <tr><td><b>Father Name:</b></td><td><?php echo $row1['fname']; ?></td></tr>
            </tbody>
            <!--
            <thead><tr><td><h4 style='color:blue;'></b>Bank Details:</b></h4></td><td></td></tr></thead>
            <tbody>
            <tr><td><b>Bank Name:</b></td><td><?php echo $row1['bname']; ?></td></tr>
            <tr><td><b>Branch:</b></td><td><?php echo $row1['branch']; ?></td></tr>
            <tr><td><b>A/c. No.:</b></td><td><?php echo $row1['account_no']; ?></td></tr>
            <tr><td><b>IFSC Code:</b></td><td><?php echo $row1['ifs']; ?></td></tr>
            <tbody>

            <thead><tr><td><h4 style='color:blue;'></b>Contact Details:</b></h4></td><td></td></tr></thead>
            <tbody>
            <tr><td><b>Mobile No.:</b></td><td><?php echo $row1['mob']; ?></td></tr>
            <tr><td><b>Alternate No.:</b></td><td><?php echo $row1['alt']; ?></td></tr>
            <tr><td><b>E-Mail:</b></td><td><?php echo $row1['email']; ?></td></tr>
            </tbody>-->
            </table> 

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>


   <?php                
        echo "</div>";  
            $i++;       
        }               
    }
    else
    {
        echo "<tr><td>No Notifications to show</td></tr>";
    }
?>
</tbody>
</table>
<?php   
 }
 ?>

---

您使用模态内部循环的方法是错误的，假设您有数千条记录，模态HTML在循环内部重复1000次

从回路内部移除modal，并将其置于回路外部
因此PHP将是，作为参考，我将页面命名为Main.PHP

<tbody class="table-bordered">
<tr>
<?php
if($result) {
$i=1;
while($row = $result->fetch_assoc()) {
$sql12="select * from users inner join bank_details on users.userid=bank_details.userid  where users.userid='".$row['rec_id']."'";
$result12=mysqli_query($con,$sql12);
$row1 = $result12->fetch_assoc();
    echo "<td>".$i."</td><td>".$row['userid']."</td><td>".$row['rec_id']."</td><td>".$row['amount']."</td><td>".$row['details']."</td><td>".$row['date1']."</td>";
        if($uid == $row['rec_id']) {
            echo "<td><button class='btn btn-warning' disabled data-toggle='modal' data-target='#myModal".$i."'>View</button></td>";
        } else {
            echo "<td><button class='btn btn-success' data-toggle='modal' data-target='#myModals".$i."'>View</button></td>";   
        }
        if($uid == $row['userid']){
            if($row['status']=="pending") {
                echo "<td><button class='btn btn-info' disabled id='sndr'>Pending to Accept</button></td>";
            } else if($row['status']=="accepted") {
                echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td>";
            } else {
                echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td>";
            }
        } else {
            if($row['status']=="pending" ) {
?>
    <td>
        <form role="form">
        <div class="form-group">
            <select class="form-control" id="sel1">
                <option>Select</option>
                <option value="accepted" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-success"> Accept</span></option>
                <option value="rejected" onclick="aprvs(<?php echo $row['id']; ?>, this.value);"><span class="btn btn-danger">Reject</span></option>
            </select>
        </div>
        </form>
    </td>
<?php 
            } else if($row['status']=="accepted") {
                echo "<td><button class='btn btn-success' disabled id='sndr'>Request Accepted</button></td>";
            }else{
                echo "<td><button class='btn btn-danger' disabled id='sndr'>Request Rejected</button></td>";
            }
        }
?>
<?php 
    $i++; } 
    } else {
        echo "<td>No Notifications to show</td>";
    }
?>
</tr>
</tbody>
</table>
<?php } ?>

现在将下面的模式HTML放在
Main.php中的循环之外，并用模式id替换
id='

<div class='modal fade' id="myModal" role='dialog' tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" >
    <!-- Modal content-->
        <div class="modal-content">
            //Content Will Load Here
        </div>
    </div>
</div>

表结构中有大量不必要的
和
标记，一些打开和一些关闭错误导致了快照中所示的问题，无法涵盖所有这些，因此检查此项可以让您了解错误的原因和位置。
为什么有
？
<div class='modal fade' id="myModal" role='dialog' tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" >
    <!-- Modal content-->
        <div class="modal-content">
            //Content Will Load Here
        </div>
    </div>
</div>

<?php
//Database Connection
$id = $_GET['id'];
//Run Query to fatch data from database against `$id`
?>
<div class="modal-header" style="background-color:green;padding:10px;">
    <button type="button" class="close" data-dismiss="modal" >&times;</button>
    <center><h4 class="modal-title" align="center" style="color:white;">User Details</h4></center>
</div>
<div class="modal-body" style="padding:10px;">
    <table class='table table-striped'>
        <thead>
            <tr><td><h4 style='color:blue;'></b>User Details:</b></h4></td><td></td></tr>
        </thead>
        <tbody>
            <tr><td><b>User Id:</b></td><td><?php echo $row['userid']; ?></td></tr>
            <tr><td><b>Name:</b></td><td><?php echo $row['name']; ?></td></tr>
            <tr><td><b>Father Name:</b></td><td><?php echo $row['fname']; ?></td></tr>
        </tbody>
    </table> 
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

$(document).ready(function() {
    $('#myModal').on('hide.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
});