我在while循环中有一个表，其中包含一个模态的编辑按钮。我想要实现的是，当您单击模式按钮“编辑”时，模式中的数据将与正确的老师姓名相对应。所以我试图循环其中的模态和数据。我所做的没有用，它只显示循环中所有模态的数组中的第一个或最后一个值。
所以桌子看起来像这样
| teacher name | Phone | Email | Edit | Delete |
| Mary | 111-111-1111 | mary@mary.com | Edit | Delete |
| Rob | 111-111-1111 | rob@rob.com | Edit | Delete |
| Liz | 111-111-1111 | Liz@Liz.com | Edit | Delete |
当我单击任何一个编辑时，所有它们的老师名称都会显示“ Mary”。但是我想要的是让Mary进行第一次编辑，Rob进行第二次编辑，依此类推...
代码：
<!--TABLES-->
<div id="table" class="table-responsive-sm container">
<table id="feisHistory" class="table table-striped table-bordered responsive table-hover" cellspacing="0" style="width:100%">
<thead>
<tr>
<th id="teacherName" >Teacher Name</th>
<th id="phone">Phone</th>
<th id="email">Email</th>
<th id="edit" data-feild="operate" data-events="operateEvents" data-formatter="operateFormatter" class="d-print-none">Edit</th>
<th id="delete" data-feild="operate" data-events="operateEvents" data-formatter="operateFormatter" class="d-print-none">Delete</th>
</tr>
</thead>
<tbody>
<?php
$school_sql = "SELECT * FROM `Users` WHERE id = '$id'";
$school_res = mysqli_query($con,$school_sql);
$school_row = mysqli_fetch_array($school_res);
$school_name = $school_row["school"];
$sql = "SELECT * FROM `teachers` WHERE school = '$school_name' ORDER BY teacher ASC";
$res = mysqli_query($con,$sql);
if($res==FALSE){
die('there was an error running query [' . $con->error . ']');
}
while($row=mysqli_fetch_array($res)){
$teacherName = $row["teacher"];
$teacherPhone = $row["phone"];
$teacherEmail = $row["email"];
$teacherId = $row["id"];
?>
<tr>
<td><?php echo $teacherName; ?></td>
<td><?php echo $teacherPhone; ?></td>
<td><?php echo $teacherEmail; ?></td>
<td class="d-print-none" style="margin: auto;">
<a href="" data-toggle="modal" data-target=".bd-editprofile-modal-lg" style="cursor: pointer; color: #749800;">Edit</a>
<!---MODAL BUTTON-->
<div class="col-sm-12 content-btn">
<div class="row">
<div class="col-sm-12">
<div class="formModal1">
<div class="modal fade bd-editprofile-modal-lg" id="editProfile" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="color: #464646">
<h5 class="modal-title text-center">Edit Teacher</h5>
</div>
<form id="updateForm" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<input type="hidden" name="id" value="">
<div class="controls">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group col-sm-12">
<div class="row">
<div class="col-sm-3">
<label> Teacher Name</label>
</div>
<div class="col-sm-8">
<input id="teacher_name" type="text" name="teacher_name" class="form-control" placeholder="<?php echo $teacherName?>">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="d-print-none" style="margin: auto;">
<a href="delete_teacher?id=<?php echo $teacherId; ?>" style="cursor: pointer; color: #749800;" onclick="return confirm('Are you sure you want to delete this teacher? You will never be able to get this information back.');">Delete</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
我知道我的代码草率，请不要批评我太多。.我还在学习。
答案 0 :(得分：0)
您可以使用非ajax版本，但是您应该避免这种情况，因为它通过在while循环中的每个元素id上分配唯一的id，来重写大量代码（取决于记录），也许您可以使用$teacherId作为标识符：
while($row=mysqli_fetch_array($res)){
$teacherName = $row["teacher"];
$teacherPhone = $row["phone"];
$teacherEmail = $row["email"];
$teacherId = $row["id"];
?>
<tr>
<td><?php echo $teacherName; ?></td>
<td><?php echo $teacherPhone; ?></td>
<td><?php echo $teacherEmail; ?></td>
<td class="d-print-none" style="margin: auto;">
<a href="" data-toggle="modal" data-target=".bd-editprofile-modal-lg" style="cursor: pointer; color: #749800;">Edit</a>
<!---MODAL BUTTON-->
<div class="col-sm-12 content-btn">
<div class="row">
<div class="col-sm-12">
<div class="formModal1">
<div class="modal fade bd-editprofile-modal-lg" id="editProfile<?=$teacherId?>" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="color: #464646">
<h5 class="modal-title text-center">Edit Teacher</h5>
</div>
<form id="updateForm<?=$teacherId?>" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<input type="hidden" name="id" value="">
<div class="controls">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group col-sm-12">
<div class="row">
<div class="col-sm-3">
<label> Teacher Name</label>
</div>
<div class="col-sm-8">
<input id="teacher_name<?=$teacherId?>" type="text" name="teacher_name" class="form-control" placeholder="<?php echo $teacherName?>">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save<?=$teacherId?>">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="d-print-none" style="margin: auto;">
<a href="delete_teacher?id=<?php echo $teacherId; ?>" style="cursor: pointer; color: #749800;" onclick="return confirm('Are you sure you want to delete this teacher? You will never be able to get this information back.');">Delete</a>
</td>
</tr>
<?php } ?>
答案 1 :(得分：0)
您可以通过多种方式解决此问题，而我将ajax用于此解决方案。
这个示例演示如何使用ajax获取每个老师姓名的数据。
$('.edit').on('click', function(){
let id = $(this).attr("data-id");
let tempurl = "";
// this is example cause i create seperate json data, you can dynamically create select your DB based on id
if (id == 1){
tempurl = "https://api.myjson.com/bins/19w0nm";
}else if (id == 2){
tempurl = "https://api.myjson.com/bins/rhq2a";
}else if (id == 3){
tempurl = "https://api.myjson.com/bins/m4tma";
}
$.ajax({
url: tempurl,
type: "get",
dataType: "JSON",
data: {}, //this is data you send to your server
success: function(res)
{
console.log(res);
$('#tchName').val(res.name);
$('#tchPhone').val(res.phone);
$('#tchEmail').val(res.email);
$("#modalEdit").modal('show');
}
})
})
$('#btnSave').on('click', function(e){
e.preventDefault();
$("#modalEdit").modal('toggle');
alert('Your data has been update');
})<html>
<head>
<title>SO</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="modal" tabindex="-1" role="dialog" id="modalEdit">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label for="">Name</label>
<input type="text" name="tchName" id="tchName" value="">
<br>
<label for="">Phone</label>
<input type="text" name="tchPhone" id="tchPhone" value="">
<br>
<label for="">Email</label>
<input type="text" name="tchEmail" id="tchEmail" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btnSave">Save changes</button>
</div>
</div>
</div>
</div>
<h3>Testing Table</h3>
<div class="col-md-6">
<table class="table table-bordered" style="text-align:center">
<thead>
<td>Name</td>
<td>Phone</td>
<td>Email</td>
<td>Action</td>
</thead>
<tr>
<td><?php echo 'Teacher Name 1'; ?></td>
<td><?php echo '0211'; ?></td>
<td><?php echo 'email1@email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="1">Edit</button>
</tr>
<tr>
<td><?php echo 'Teacher Name 2'; ?></td>
<td><?php echo '0222'; ?></td>
<td><?php echo 'email2@email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="2">Edit</button>
</tr>
<tr>
<td><?php echo 'Teacher Name 3'; ?></td>
<td><?php echo '0223'; ?></td>
<td><?php echo 'email3@email.com'; ?></td>
<td class="d-print-none" style="margin: auto;">
<button data-toggle="modal" class="edit" data-id="3">Edit</button>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
忽略tempurl，您可以创建函数以根据老师的姓名，身份证或其他任何信息来选择和获取老师的特定数据。