每行上的自举模态

Question

基本上，该页面应该在确认操作之前提示用户（最好是模式）。我修改了我们的网页，以便在删除每行时包含模式。 如果我在数据目标按钮和模式ID上都包含id =“ modalname”，则该模式似乎无法打开。

<table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Full Name</th>
                    <th>Company</th>
                    <th>Address</th>
                    <th>Email</th>
                    <th>Contact No.</th>
                    <th>Birth Date</th>


                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
<?php

$con = mysqli_connect("localhost","root","","database");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
        $query=mysqli_query($con,"select * from client  order by lname")or die(mysqli_error());
        while($row=mysqli_fetch_array($query)){

?>
                      <tr>
                        <td><?php echo $row['lname'];?>,
                       <?php echo $row['fname'];?> <?php echo $row['mname'];?> </td>
                        <td><?php echo $row['company'];?></td>
                         <td><?php echo $row['address'];?></td>
                         <td><?php echo $row['email'];?></td>
                        <td><?php echo $row['contact'];?></td>
                        <td><?php echo $row['bday'];?></td>
                        <td>
                <button type="button" data-toggle="modal" data-target="#deletemodale<?php echo $row['id'];?>" >Open Modal</button>



                        </td>
                      </tr>


                    </tbody>

                  </table>

这是我的桌子的示例代码。 它包括来自数据库的回显值，模态每一行上都有一个按钮。

模态代码：

      <div class="modal fade" id="deletemodale<?php echo $row['id'];?>" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

我之前用tag和href尝试过，如果我将其悬停在URL上，则行ID似乎会显示在URL上，但两种情况下模式都不会打开。 如果我删除其ID上的php标签，该模式似乎也可以正确打开。 由于其动态性质，我也仅对其余行使用此模式代码

Answer 1

从我看到的代码是有效的，但我看不到while循环在哪里结束。 如果您的while循环中没有模态代码，则只会打印一个模态html代码，因此仅在最后一行['id']上有模态。是这样吗？ 另外，您的while循环应该在tbody标签之前结束。

Answer 2

我自由了，在最后一个</tr> （在第一段代码的</tbody>之前）为while循环添加了右括号。我还复制了第二段代码（您将其命名为“模态代码” “）紧接在右括号之前–由于您为每个模式指定了不同的ID，因此我假设您表中的每一行都有自己的模式。并且在我的WAMP服务器上一切正常。请确保：

1. 您包括了jquery.js，bootstrap.css和bootstrap.js
2. 您已在浏览器中启用了javascript。