У меня есть проект 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>