Question

我有一个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">&times;</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>

Answer 1

您无需为此使用jquery。您的第一个选择是正确的，只是缺少一些工具。您可以在按钮th:attr="data-target=${book.title}"和模态上使用，将其ID更改为<div class="modal fade" th:id="${book.title}" role="dialog">。

这样，您将为每个按钮设置正确的目标，而无需添加任何不必要的代码。当然，这只是一个例子，但是您可以使用想要的唯一值作为目标或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">&times;</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>

通过单击表行上的按钮，使用动态数据生成模式弹出窗口

1 个答案: