从点击表格行的按钮生成带有动态数据的模式弹出窗口
我有一个Maven/Spring-Boot/Thymeleaf项目，我希望在一行中单击一个按钮，以触发一个模式弹出窗口，其中包含该行数据的详细视图。
我最初的问题是，当在任何给定行上单击按钮时，模态弹出窗口只会显示第一行的数据。我意识到这是因为每一行中的每个按钮都有相同的数据目标，并且浏览器正在抓取表中的第一行。
所以，现在我正在尝试使用JavaScript/jQuery为我填充模态数据。我已经删除了按钮的数据目标，这样它就不会触发默认和不正确的行为。目前，我一直在尝试简单地在输入文本字段中显示一本书的标题。它不起作用。模态弹出窗口与文本字段一起显示，但它是空的，并且没有该特定行的标题。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Book Note Book</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.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$('#myButton').on('click',function(){
$("#myModal").modal("show");
$("#txttitle").val($(this).closest('tr').children()[0].textContent);
});
</script>
</head>
<body>
<div class="container">
<h2>Books</h2>
<p>This is all the books you've read</p>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date read</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr th:if="${books.empty}">
<td colspan="2"> No Books Available </td>
</tr>
<tr th:each="book : ${books}">
<td><p th:text="${book.title}"/></td>
<td><p th:text="${book.author}"/></td>
<td><p th:text="${book.dateRead}"/></td>
<td><button type="button" id="myButton" data-toggle="modal"><span class="glyphicon glyphicon-info-sign"></span></button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<tbody>
<tr>
<td><p><b>Title</b></p></td>
<td><input type="text" id="txttitle"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
共有1个答案
您不需要为此使用jquery。你的第一个选择是正确的，你只是缺少一些工具。您可以在按钮上使用：attr=“data target=${book.title}”并在模式上更改其id，如
这样，您将为每个按钮设置正确的目标，并且不需要添加任何不必要的代码。当然，这是一个示例，但您可以为目标或id使用任何您想要的唯一值。最后，您的代码会看起来像这样。
<tr th:each="book : ${books}">
<td><p th:text="${book.title}"/></td>
<td><p th:text="${book.author}"/></td>
<td><p th:text="${book.dateRead}"/></td>
<td><button type="button" th:attr="data-target=${book.title}" id="myButton" data-toggle="modal"><span class="glyphicon glyphicon-info-sign"></span></button>
<div class="modal fade" th:id="${book.title}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<tbody>
<tr>
<td><p><b>Title</b></p></td>
<td><input type="text" id="txttitle"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
-
我有一个asp。net web表单网站，我正试图通过添加弹出式模块来增强该网站，该模块显示可租赁设备的租金。在大多数页面上，费率是“静态”的，并张贴在该页面上所有设备的页面顶部。但是，在一些页面上，顶部的费率不能是“静态”的，因为每件设备的费率不同，因此需要弹出窗口。 我已经创建了一个用户控件（我将称之为“费率卡”），它对传递给它的设备ID进行数据库查找和费率计算，然后创建一个格式化的DIV（包括
-
我在我的项目中为10个产品创建了剑道网格。当我点击剑道网格中显示的productname时，我希望弹出包含产品详细信息的剑道窗口。 我已经查看了剑道网格的演示，但我不想编辑所选产品的详细信息，也不想使用示例和演示中所示的“详细信息”按钮的单独列。 我还查看了剑道ui的音乐商店演示，但我无法理解它的代码，因为它在jQuery中，我正在使用asp。net mvc与我的项目的razor语法 注意：我希望
-
本文向大家介绍java实现点击按钮事件弹出子窗口，包括了java实现点击按钮事件弹出子窗口的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了java实现点击按钮事件弹出子窗口的具体代码，供大家参考，具体内容如下 要求： 1、在父窗口中添加一个按钮 2、点击按钮弹出子窗口 注意：这是JDK1.7版本 在JDK1.7之前，JFrame是不能直接添加子窗口的，要先将JInternalFram
-
本文向大家介绍通过点击jqgrid表格弹出需要的表格数据，包括了通过点击jqgrid表格弹出需要的表格数据的使用技巧和注意事项，需要的朋友参考一下 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下: 完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。 自定义的工具列 预设的Navigator工具列，可
-
问题内容： 我有这个小网站，我想用请求库填写表格。问题是当填写表单数据并单击按钮时，我无法到达下一个站点（输入不起作用）。 重要的是，我无法通过某种类型的点击漫游器来做到这一点。这需要完成，这样我才能在没有图形的情况下运行。 前三个条目的名称，消息，符号是文本区域，步骤是我认为的按钮。 当我通过chrome手动发送请求时，表单数据如下所示： 姓名：约翰·约翰 讯息：XXX 签名：XXX 第1步 b
-
问题内容： 在我的网站上，单击该按钮时，它将提示一个弹出窗口。我正在使用模式弹出窗口。我的问题是，我无法根据按钮的ID获取正确的数据。下面是我的代码：html表： 的是主键。 然后，下面是模式弹出窗口的代码 而且，我将它们放在一个文件中。总而言之，如下所示： 问题答案： 将此代码放在 footer.php 或此页面末尾。 通过ajax调用您的“ somepage.php”（单独的页面。将此放置在您