【发布时间】：2021-05-23 02:09:08
【问题描述】：
我有一个显示记录的表格，并制作了两个用于编辑和删除的按钮。单击时引导模式正在打开，但无论单击哪一行，它都会显示第一条记录。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>User Categories</h1>
<div class="table-responsive text-nowrap">
<table class="table table-striped table-hover table-fixed">
<thead>
<tr class="bg-info text-white">
<th scope="col" class="text-center">ID</th>
<th scope="col" class="text-center">Category</th>
<th scope="col" class="text-center">Edit</th>
<th scope="col" class="text-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">25</td>
<td>Hello</td>
<td class="text-center"><a href="#" data-toggle="modal"
data-target="#primary"><button class="font-awesome-btn">
<i class="fa fa-edit" aria-hidden="true"></i> Edit
</button></a> <!-- The Modal -->
<div class="modal fade" id="primary" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" backdrop="static" keyboard="false">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header modal-header-primary">
<button type="button" class="close order-1"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>
<i class="fa fa-edit" aria-hidden="true"></i> Updating
Category
</h4>
</div>
<div class="modal-body">
<!-- Modal body -->
<h3>Please write new value for:</h3>
<span class=red>Hello</span>
<form action="/parvaz.aero/editCategory" method="post">
<input type="hidden" name="categoryId" value="25"><input
type="text" name="category" value="">
<div>
<!-- Modal footer -->
<div class="modal-footer">
<button class="font-awesome-btn">
<i class="fa fa-save" aria-hidden="true"></i> Save Changes
</button>
</form>
<button type="button" class="font-awesome-btn"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"></i> Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal --></td>
<td class="text-center"><a href="#" data-toggle="modal"
data-target="#danger"><button class="font-awesome-btn">
<i class="fa fa-trash" aria-hidden="true"></i> Delete
</button></a> <!-- The Modal -->
<div class="modal fade" id="danger" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" backdrop="static" keyboard="false">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header modal-header-danger">
<button type="button" class="close order-1"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>
<i class="fa fa-check-circle" aria-hidden="true"></i> Are you
sure you want to delete
</h4>
</div>
<div class="modal-body">
<!-- Modal body -->
<form action="/parvaz.aero/deleteCategory" method="post">
<input type="hidden" name="categoryId" value="25">
<div>
<!-- Modal footer -->
<div class="modal-footer">
<button class="font-awesome-btn">
<i class="fa fa-check-circle" aria-hidden="true"></i> Yes
</button>
</form>
<button type="button" class="font-awesome-btn"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"></i> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal --></td>
</tr>
<tr>
<td class="text-center">24</td>
<td>Testing</td>
<td class="text-center"><a href="#" data-toggle="modal"
data-target="#primary"><button class="font-awesome-btn">
<i class="fa fa-edit" aria-hidden="true"></i> Edit
</button></a> <!-- The Modal -->
<div class="modal fade" id="primary" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" backdrop="static" keyboard="false">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header modal-header-primary">
<button type="button" class="close order-1"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>
<i class="fa fa-edit" aria-hidden="true"></i> Updating
Category
</h4>
</div>
<div class="modal-body">
<!-- Modal body -->
<h3>Please write new value for:</h3>
<span class=red>Testing</span>
<form action="/parvaz.aero/editCategory" method="post">
<input type="hidden" name="categoryId" value="24"><input
type="text" name="category" value="">
<div>
<!-- Modal footer -->
<div class="modal-footer">
<button class="font-awesome-btn">
<i class="fa fa-save" aria-hidden="true"></i> Save Changes
</button>
</form>
<button type="button" class="font-awesome-btn"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"></i> Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal --></td>
<td class="text-center"><a href="#" data-toggle="modal"
data-target="#danger"><button class="font-awesome-btn">
<i class="fa fa-trash" aria-hidden="true"></i> Delete
</button></a> <!-- The Modal -->
<div class="modal fade" id="danger" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" backdrop="static" keyboard="false">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header modal-header-danger">
<button type="button" class="close order-1"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>
<i class="fa fa-check-circle" aria-hidden="true"></i> Are you
sure you want to delete
</h4>
</div>
<div class="modal-body">
<!-- Modal body -->
<form action="/parvaz.aero/deleteCategory" method="post">
<input type="hidden" name="categoryId" value="24">
<div>
<!-- Modal footer -->
<div class="modal-footer">
<button class="font-awesome-btn">
<i class="fa fa-check-circle" aria-hidden="true"></i> Yes
</button>
</form>
<button type="button" class="font-awesome-btn"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"></i> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal --></td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
</main>
</body>
</html>
请检查我的代码 [JSFiddle][1]
我无法修复它。请指教
最好的问候 [1]：https://jsfiddle.net/Raakh5/2zrukcwj/4/
【问题讨论】：
-
你的意思是“你好”总是显示在模态中吗？这是硬编码的...
-
是的，总是显示“你好”
标签： html bootstrap-4 bootstrap-modal