在php中显示从数据库到html模式的值不起作用

Question

我有一个 PHP 页面，我在其中根据从 URL 获取的 id 显示数据，数据显示正常，现在我放置了一个名为 comment 的字段名称，我给出了一个按钮，点击它会给出一个模式.如果我单击按钮，值应该根据模态中的相应 id 来，但是当我单击按钮时，模态变为空白，我已经完成了以下代码：

var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 20%;
  height: 40%
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<table class="table table-borderless table-striped table-earning">



  <thead>
    <tr>
      <tr>
        <th>S.NO</th>
        <th>View</th>
        <th>Edit</th>

        <th>Full Name</th>

        <th>Mobile</th>
        <th>Comment</th>
        <th>Space</th>
        <th>Email</th>
        <th>Enquiry Date</th>

      </tr>
    </tr>
  </thead>
  <?php
$ret=mysqli_query($con,"select * from enquiry where Space IS NOT NULL");
$cnt=1;
while ($row=mysqli_fetch_array($ret)) {

?>

    <tr>
      <td>
        <?php echo $cnt;?>
      </td>
      <td><a href="enquiryview.php?editid=<?php echo $row['id'];?>" title="View Full Details"><i class="fa fa-edit fa-1x"></i></a></td>
      <td><a href="enquiryedit.php?editid=<?php echo $row['id'];?>" title="Edit Full Details"><i class="fa fa-edit fa-1x"></i></a></td>

      <td>
        <?php  echo $row['name'];?>
      </td>
      <td>
        <?php  echo $row['phone'];?>
      </td>
      <td><input id="myBtn" type="button" value="Comment"></td>
      <td>
        <?php  echo $row['Space'];?>
      </td>
      <td>
        <?php  echo $row['email'];?>
      </td>
      <td>
        <?php  echo $row['date'];?>
      </td>

    </tr>
    <?php 
$cnt=$cnt+1;
}?>
</table>


<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close"><!-- &times; --></span>

    <div class="form-style-10">
      Hi
      <?php  echo $row['name'];?>
    </div>

  </div>

</div>

我尝试在模态之后关闭 while 循环，但随后我的表中只显示了一个值，并且模态显示该值注释和一些 html 代码。 谁能告诉我这里有什么问题，提前谢谢

Answer 1

请使用 jQuery a、ajax 和 bootstrap modal 并尝试以下代码 为您的评论按钮提供一个类并获取 id 作为按钮的属性

   //your jquery function to trigger modal and load data to it
   // get_details.php serve the data

    $(".your_comment_button").click(function(e){
      var modal = document.getElementById("myModal");
            e.preventDefault();
            var id = $(this).attr('enq_id');
            $.ajax({
              type:'GET',
              url:'get_deatils.php?id='+id, 
              success:function(data){
                 $('#myModal').find('.modal-content').html(data);
                 $('#myModal').modal('show');
              }
           });

        });
    });

你的 get_details.php 看起来像

<?php
$con = mysqli_connect("localhost","root","","yourdb");
$id=$_REQUEST['id'];
$enq = mysqli_query($con, "SELECT enquiry.* from enquiry  Where id=$id");
$row = mysqli_fetch_array($enq);
?>
<div class="form-style-10">
  Hi
  <?php  echo $row['name'];?>
</div>