jquery-異なるモーダル(動的IDを使用)phpを開くテーブルのすべての行にボタンを作成する方法
私はphpを初めて使用し、劇場の学校管理アプリを作成しようとしています。 プロジェクトのすべての学生でテーブルを作成するセクションがあり、テーブルのすべての行に、すべてのプロジェクト週でモーダルを開くボタンと、週ごとの費用を支払ったものをチェックするチェックボックスを設定したいと思います。 以下のコードで動作させるようにしましたが、最後のレコードだけがモーダルを開きます。プレビューレコードは何もしません。テーブルに別のレコードを追加すると、新しいレコードのみがモーダルを開きます。助けてください!
私のコード:
<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');
?>
答え :
解決策:
データのフェッチに使用している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 } ?>
答え :
解決策:
質問とコードを確認しました。私が理解できる限り、あなたはあなたのモーダルに、ユーザーがクリックした特定の学生の支払い記録の詳細を表示させたいと思っています。
残念ながら、変数$ idを定義したループを使用しており、ループが繰り返されるたびに$idの値が変更されます。したがって、最終的に、$idはデータベースの最後のレコードの値を保持します。
コードによると、生成されるHTML構造は次のようになります(5人の学生の記録を考慮):
<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>
ここで、$ idが最後のレコードの値を保持するという理由だけで、モーダルはidを5として取得します。テーブルの最後の行のIDがモーダルのIDと一致するため、モーダルは最後の行からのみ開きます。
つまり、これがコードの問題でした。コードの何が問題だったのかを理解していただければ幸いです。それでは、これの解決策の部分に行きましょう。
このために、jqueryを使用してモーダルを開くことをお勧めします。クラスセレクターを使用してモーダルを開き、データ属性を使用してモーダルに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>
答えへのリンク
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。