I'm working on a shopping list web app in Eclipse using Java, Thymeleaf, Spring, HTML and some CSS. I used HTML to code a checklist into the app so when I am done with a certain list I can click the checkbox and it puts a line through the text. However, when I refresh the page the checkbox doesn't stay checked. I'd like to be able to keep the box checked with a page refresh. I've tried various different bits of code from other Stack Overflow questions like coding Javascript into the HTML page, but nothing seems to work so far. Here's my HTML code:
<!DOCTYPE HTML>
<html xmlns:th="http://ift.tt/wfNV60"
xmlns:layout="http://ift.tt/1nWSSl4"
layout:decorator="layouts/basic">
<link rel="stylesheet" th:href="@{/http://ift.tt/2ggU5Ud}" />
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 15px;
}
.strikethrough:checked+.strikeThis {
text-decoration: line-through
}
</style>
</head>
<body layout:fragment="content">
<div class="row">
<h1>Shopping Lists</h1>
<!-- a simple button for later to add shopping lists -->
<a href="/" th:href="@{|/ListsofLists/add|}"><input type="button"
value="Add list" /></a>
<table>
<thead>
<tr>
<th>Name</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody class="list">
<tr th:each="list : ${lists}">
<td><input type="checkbox" name="check" class="strikethrough"
value="1" /> <label for="check" class="strikeThis"
th:text="${list.name}"> Name </label></td>
<!-- <td th:text="${list.name}"></td> -->
<td><a href="/" th:href="@{|/ListsofLists/${list.id}|}">Show</a></td>
<td><form method="POST">
<input type="hidden" name="listId" th:value="${list.id}" />
<button type="submit">Delete</button>
</form></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I will try to answer as many questions as possible in order to figure out this question. Apologies if it's something rather simple, I am new to coding and still learning.
Aucun commentaire:
Enregistrer un commentaire