如何在 table 的每一行中创建一个按钮以打开不同的模式（具有动态 ID）php

Question

我是 php 的新手，我正在尝试制作一个戏剧学校管理应用程序。我有一个部分，我为一个项目的所有学生创建了一个 table，我希望 table 中的每一行都有一个按钮，可以打开一个包含所有项目周的模式，还有一个复选框来检查那些支付了每周的费用。我试图让它与下面的代码一起工作，但只有最后一条记录打开模式。预览记录不执行任何操作。如果我在 table 中添加另一条记录，则只有新记录会打开模式。请帮忙！

我的代码：

<tbody id="firstClass">
            <?php
                
                if( mysqli_num_rows($result) > 0){

                    // we have data
                    // output the data

                    while( $row = mysqli_fetch_assoc($result) ) {

                        $id = $row["id"];
                        /* print_r($id); */
                        
                        echo "<tr>";

                        echo "<td>" . $row['id'] . "</td><td>" . $row['firstname'] . "</td><td>" . $row['lastname'] . "</td><td>" . $row['Age'] . "</td><td>" . $row['email'] . "</td><td>"  . $row['phone'] . "</td><td>" . $row['sign_date'] ."</td>";

                        echo '<td><button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#payments-' . $id . '">
                        <i class="fas fa-euro-sign"></i>
                        </button></td>';

                        echo '<td><a href="edit_student.php?id=' . $row['id'] .'" type="button" class="btn btn-primary btn-sm">
                        <i class="far fa-edit"></i>
                        </a></td>';

                        echo '<td><a href="delete_student.php?id=' . $row['id'] .'" type="button" class="btn btn-danger btn-sm delete">
                        <i class="fas fa-trash-alt"></i>
                        </a></td>';

                        echo "</tr>";

                        
                        
                    }
                } else {// if no entries
                    echo "<div class='alert alert-warning'>Δεν έχετε εγγραφές!</div>";

                }

            

                // mysqli_close($conn);
            ?>

            <tr>
                <td colspan="11"><div class="text-center"><a href="addStudent.php" type="button" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> Προσθήκη εγγραφής</a></div></td>
            </tr>
            </tbody>
        </table>
    </div>



</div>

<!-- Modal -->

 <div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Πληρωμή</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- <?php echo $id ;?> -->
      <div class="table-responsive">
        <table class="table" id='myTable'>
            <thead>
                
                <tr>
                    <th class="table-cell text-center" scope="col">Week 1</th>
                    <th class="table-cell text-center" scope="col">Week 2</th>
                    <th class="table-cell text-center" scope="col">Week 3</th>
                    <th class="table-cell text-center" scope="col">Week 4</th>
                    <th class="table-cell text-center" scope="col">Week 5</th>
                    <th class="table-cell text-center" scope="col">Week 6</th>
                    <th class="table-cell text-center" scope="col">Week 7</th>
                    <th class="table-cell text-center" scope="col">Week 8</th>
                
                </tr>
            </thead>
            <tbody>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>
                <td class="text-center"><input type="checkbox"></td>

            </tbody>
        </table>
    </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div> 




<?php

include('includes/footer.php');

?>

Answer 1

您还必须将模态写入 WHILE 循环中，您将使用它来获取数据以便为每一行添加一个单独的模态。否则只有最后一个 id 会找到模态。像这样格式化您的代码：

<?php
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $id = $row["id"];
    ?>
            <tr>
                <td><?= $id ?></td> //<?= ?> is the short form of <?php echo '' ?>
                .................
            </tr>
            
           <!-- Modal -->

          <div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1" 
          aria-labelledby="exampleModalLabel" aria-hidden="true"> 
          ..................
          </div>                 

        <?php }
    } else { ?>
          .............
    <?php } ?>

Answer 2

我刚刚查看了你的问题和你的代码。据我所知，您希望您的模式显示用户点击的特定学生付款记录的详细信息。

不幸的是，您使用了一个循环，在该循环中您定义了一个变量 $id，并且 $id 的值在每次循环迭代时都会更改。所以，最后，$id 保存了数据库中最后一条记录的值。

根据您的代码，生成的 HTML 结构将如下所示（考虑五个学生的记录）：

<tbody>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-1">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-2">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-3">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-4">xyz</button></td>
    </tr>
    <tr>
        <td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-5">xyz</button></td>
    </tr>                
</tbody>

<div class="modal fade" id="payments-5">
    .....
</div>

这里 modal 将获取 id 为 5 只是因为 $id 将保存最后一条记录的值。由于 table 最后一行的 id 与模态框的 id 匹配，模态框只从最后一行打开。

所以，这是代码的问题。希望您已经了解您的代码出了什么问题。现在让我们来解决这个问题。

为此，我建议您使用 jquery 打开模式。您将在其中使用 class 选择器打开模态，并使用数据属性在模态中传递 student_id。

分享一个片段以获得更好的帮助。

$('.open-modal').on('click', function() {
  var student_id = $(this).data('student_id');
  $('#student_id').val(student_id);
  $('.modal').modal('toggle');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><button type="button" class="open-modal" data-student_id='1'>Student 1</button></td>
    </tr>
    <tr>
      <td><button type="button" class="open-modal" data-student_id='2'>Student 2</button></td>
    </tr>
    <tr>
      <td><button type="button" class="open-modal" data-student_id='3'>Student 3</button></td>
    </tr>
  </tbody>
</table>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form>
<!–– form to be used for saving the data with student id as hidden input -->
          Student ID: <input type="text" id="student_id">
        </form>
      </div>
    </div>
  </div>
</div>

这将让您只为 n 个学生创建一个模式。

如何在 table 的每一行中创建一个按钮以打开不同的模式（具有动态 ID）php

How to create a button in every row of a table that opens a different modal(with dynamic id) php

php

jquery

modal-dialog