这是我修改过的代码，以便正确打开我的模态。我仍然面临将表变量传递给模态的问题，以便可以通过单击编辑按钮根据您要编辑的行来编辑它们。
<html>
<head>
<title>Admin View</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body background=http://wallpapercave.com/wp/ItmVuT6.jpg>
<!-- container with table headers / user records / edit function / approve function -->
<div class="container">
<table class="table table-hover table-striped">
<center>
<thead>
<tr style="font-size: 24; color: white;">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</center>
<tbody style="background-color: #F0F8FF">
<?php
$i = 1; foreach($users as $u)
{
?>
<tr style="font-size: 20;">
<td width="5%;"> <?php echo $i; ?></td>
<td><?php echo $u->first_name; ?></td>
<td><?php echo $u->last_name; ?></td>
<td><?php echo $u->email; ?></td>
<td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td>
<!--edit button-->
<td><a href="" data-toggle="modal" data-target="#editModal"><span class='glyphicon glyphicon-edit'></span></a></td>
<!--approve button-->
<td><a href= "/ci/index.php/myform/approve/?user_id=<?php echo $u->id;?>"><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></a></td>
</tr>
<?php $i++; } ?>
</tbody>
<table class="table table-hover table-striped">
<center>
<thead>
<tr style="font-size: 24; color: white;">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</center>
<tbody style="background-color: #F0F8FF">
<?php
$i = 1; foreach($users as $u) {
?>
<tr style="font-size: 20;">
<td width="5%;"> <?php echo $i++; ?></td>
<td><?php echo $u->first_name; ?></td>
<td><?php echo $u->last_name; ?></td>
<td><?php echo $u->email; ?></td>
<td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td>
<!--edit button-->
<td><a data-toggle="modal" data-target="#editModal<?php echo $u->id;?>"><span class='glyphicon glyphicon-edit'></span></a></td>
<!--approve button-->
<td><a href= "/ci/index.php/myform/approve/?user_id=<?php echo $u->id;?>"><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></a></td>
</tr>
<!--modal-->
<div class='modal fade' id='editModal' tabindex='-1' role='dialog' aria-labelledby='editModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span class='glyphicon glyphicon-remove'></span></button>
<h3 class="modal-title" id='modalHeading'>Entry for User ID <?php echo $u->$id; ?></h3>
</div>
<!--modal body-->
<div class='modal-body'>
<form action='' method='post'>
<div class='form-group'>
<label for='First Name'>First Name</label>
<input class='form-control' type='text' name='first_name' value="<?php echo $first_name; ?>"><br/>
</div>
<div class='form-group'>
<label for='Last Name'>Last Name</label>
<input class='form-control' type='text' name='last_name' value="<?php echo $last_name; ?>"/><br/>
</div>
<div class='form-group'>
<label for='Email'>Email</label>
<input class='form-control' type='text' name='email' value="<?php echo $email; ?>"/><br/>
</div>
<div class='form-group'>
<label for='Approved'>Approved</label>
<input class='form-control' type='text' name='email' value="<?php echo $approved; ?>"/><br/>
</div>
</div>
<!--modal footer-->
<div class='modal-footer'>
<button type="button" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
<?php } ?>
</tbody>
</table>
<!--attempt at ajax function for approve success class
<script>
$('.edit').on("click", function(){
// user id stored when row edit clicked
var userid = $(this).data('id');
$ajax({
url: $(this).attr('href'),
method: 'POST',
success: function (data) {
$('#row_' + userid).addClass('success')
},
error: function (data) {
$('#row_' + userid).addClass('danger')
}
});
});
</script>
-->
</body>
</html>
请帮忙！
答案 0 :(得分：0)
您只需将模态放在foreach中，然后制作<a data-toggle="modal" data-target="#editModal<?php echo $u->id;?>"><span class='glyphicon glyphicon-edit'>和<div class='modal fade' id='editModal<?php echo $u->id;?>' tabindex='-1' role='dialog' aria-labelledby='editModalLabel' aria-hidden='true'>。我也有使用MySQLi面向对象的完整代码，我希望这可以帮助你解决问题。
<?php
$servername = "localhost";
$username = "username"; //username
$password = "password"; //password
$dbname = "myDB"; //myDB
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>ACE | aice09</title>
<!--Bootstrap 3.3.7 CSS-->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Data Tables-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<!--Fonts-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!--Date Timepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<nav class="navbar navbar-default mynavbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:;" onclick="window.location.href = '#'">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:;" onclick="window.location.href = '#'">Link <span class="sr-only">(current)</span></a></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Link</a></li>
<li class="dropdown">
<a href="javascript:;" onclick="window.location.href = '#'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:;" onclick="window.location.href = '#'">Action</a></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Another action</a></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:;" onclick="window.location.href = '#'">Link</a></li>
<li class="dropdown">
<a href="javascript:;" onclick="window.location.href = '#'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:;" onclick="window.location.href = '#'">Action</a></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Another action</a></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!--/navbar navbar-default mynavbar-->
<ol class="breadcrumb">
<li><a href="javascript:;" onclick="window.location.href = '#'"><span class="fa fa-home"></span></a></li>
<li><a href="javascript:;" onclick="window.location.href = '#'">Users</a></li>
<li class="active"><b>Data</b></li>
</ol><!--/breadcrumb-->
<!--////////////Start the Content Here//////////////////-->
<div class="container-fluid" style="">
<!-- Data Table Here -->
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th rowspan="2" style="width: 3%">NO</th>
<th rowspan="2" style="text-align: center; width: 10%;">CLIENT ID</th>
<th rowspan="2" style="text-align: center;width: 10%">NAME</th>
<th colspan="4" style="text-align: center">ADDRESS</th>
<th rowspan="2" style="width: 5%"></th>
</tr>
<tr>
<th style="text-align: center; width: 18%">BARANGAY </th>
<th style="text-align: center; width: 18%;">MUNICIPALITY </th>
<th style="text-align: center; width: 18%;">PROVINCE </th>
<th style="text-align: center; width: 18%;">COUNTRY </th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$id=1;
while($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $id++;?></td>
<td ><?php echo $row['clientid'] ?></td>
<td><a data-toggle="popover" title="Popover title" data-content="<div class='media'><a href='#'' class='pull-left'><img src='<?php echo $row['image'] ?>' class='media-object' alt='<?php echo $row['name'] ?> Image'></a><div class='media-body'><h4 class='media-heading'><?php echo $row['name'] ?></h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>"><?php echo $row['name'] ?></a></td>
<td><?php echo $row['barangay'] ?></td>
<td><?php echo $row['municipality'] ?></td>
<td><?php echo $row['province'] ?></td>
<td><?php echo $row['country'] ?></td>
<th><a href="" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal<?php echo $row['clientid'] ?>">EDIT</a> <a href="" class="btn btn-danger btn-sm"><span class="lnr lnr-trash"></span> </a> </th>
</tr>
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $row['clientid'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">ADD SOMETHING</h4>
</div>
<div class="modal-body">
<p>This for <?php echo $row['name'] ?> modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<?php
}
} else {
echo "0 results";
}
$conn->close();
?>
</tbody>
</table>
</div><!--/container-fluid-->
<!--////////////End of Content Here//////////////////-->
<!--Data Table JS-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
</body>
</html>
<style type="text/css">
.mynavbar{
margin-bottom: 0px;
}
.mymodalbutton{
margin-bottom: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//data-table
$('#example').DataTable();
});
</script>