Dears，
当我点击编辑时，我试图将一行中的列值传递给模态，但这不起作用。老实说，我不知道该怎么做。当我点击编辑时，应该会打开一个模态。我的目标是在一个禁用的字段中显示当前图像名称，并让管理员输入新名称来重命名它。
我的管理模板源=>https://startbootstrap.com/theme/sb-admin-2
数据表代码：
<tbody>
<?php
foreach ($imagesPath as $imageId=>$imagePath) {
echo "<tr>";
echo " <td> <img src=".$imagePath." border='0' height=200px width=200px /> </td>";
echo " <td name='imageName'>".substr($imagePath, 59)."</td>";
echo " <td>
<a href='#' class='btn btn-info btn-circle' data-toggle='modal' data-target='#editModal' data-val=".$imagesPath[$imageId].">
<i class='fas fa-edit'></i>
</a>
<a href='#' class='btn btn-danger btn-circle'>
<i class='fas fa-trash'></i>
</a>
</td>";
echo "</tr>";
}
?>
</tbody>
模式代码：
<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="renameModal">Rename Image</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label class="control-label" for="oldImageName">Old Image Name</label>
<input id="oldImageName" class="form-control form-control-user" disabled></input><br>
<label class="control-label" for="newImageName">New Image Name</label>
<input id="newImageName" class="form-control form-control-user" type="text" ></input>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#">Rename</a>
</div>
</div>
</div>
</div>
js代码：
<script>
$('#editModal').on('show.bs.modal', function(e) {
var oldImageValue = $(event.relatedTarget).data('val');
$(e.currentTarget).find('input[id="oldImageName"]').val(oldImageValue);
});
</script>
我尝试实现的是在将数据传递到引导模式中提到的解决方案。但这并没有奏效。你能协助完成上述工作吗？
在HTML中，您使用以下属性：
data-val=".$imagesPath[$imageId]."
然后你似乎试图在JavaScript中使用访问它
var oldImageValue = $(event.relatedTarget).data('val');
这有3个问题：
(1) 它是attribute，而不是data
(2) 它的名称是data-val而不是val
(3) 您的函数将事件称为e，而不是event。
因此，您需要使用：
var oldImageValue = $(e.relatedTarget).attr('data-val');
在那之后，我怀疑你会有一些额外的问题。。。
上述更改将导致.$imagesPath[$imageId].中的值被填充到模态中，我认为这不是您想要的。
如何解决这个问题取决于问题之外的信息，但例如，您可以更改HTML以包含其他属性，例如，类似于以下内容：
data-image-id=".$imagesPath[$imageId]."
data-image-name=".$imagesPath[$imageName]."
... and whatever else you may need...
以上只是一个建议，您可能需要根据自己的需要进行调整。
使用上述更改的演示：
$(document).ready(function() {
var table = $('#example').DataTable();
$('#editModal').on('show.bs.modal', function(e) {
var oldPersonValue = $(e.relatedTarget).attr('data-name');
$(e.currentTarget).find('input[id="oldPersonName"]').val(oldPersonValue);
});
} );<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-val="123"
data-name="Tiger Nixon">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
<tr>
<td>234</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-id="234"
data-name="Garrett Winters">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
<tr>
<td>345</td>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>
<a href="#"
class="btn btn-info btn-circle"
data-toggle="modal"
data-target="#editModal"
data-id="345"
data-name="Ashton Cox">
<i class='fas fa-edit'></i>edit
</a>
</td>
</tr>
</tbody>
</table>
<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="renameModal">Rename Person</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label class="control-label" for="oldPersonName">Old Person Name</label>
<input id="oldPersonName" class="form-control form-control-user" disabled></input><br>
<label class="control-label" for="newPersonName">New Person Name</label>
<input id="newPersonName" class="form-control form-control-user" type="text" ></input>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#">Rename</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>之后，另一个问题可能是您想要实际保存更改并重新显示保存的数据。如果是这样的话，那么可能需要一个新的问题来显示相关的代码/尝试。