Thymeleaf带内部CSS样式的删除按钮无法删除表格行的问题求助

Let's break down what's causing your styled delete button/link to fail, and fix it up step by step:

First: The Root Issue with Your Form #

Looking at your full HTML, you've wrapped the entire table in a <form> tag with this action:

<form action="@{/delete/{id}(id=${currentCourses.id})}" method="get">

But ${currentCourses.id} only exists inside your th:each="currentCourses..." loop. Outside the loop, this variable is undefined—so the form's action ends up being invalid. When you click a button inside this form, it submits this broken form instead of triggering your intended delete URL, which is why you just get a page refresh.

Fix this first: Remove the entire wrapping <form> tag—your delete action uses a direct GET link, so you don't need a global form here.

Solution 1: Style the <a> Tag to Look Like a Button (Simplest Fix) #

Your original working <a> tag just needs a small correction and some extra CSS to look like a button. You had a missing space before the class attribute, which broke the styling.

Corrected HTML: #

<td><a th:href="@{/delete/{id}(id=${currentCourses.id})}" class="button buttonDelete">Delete</a></td>

Update Your CSS: #

Add a base .button class to turn the link into a button-like element (remove default link styling, add padding, etc.):

.button {
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none; /* Remove default link underline */
  border: 1px solid;
  cursor: pointer;
}
.buttonDelete { 
  background-color: red; 
  border-radius: 6px; 
  border-color: black; 
  font-weight: bold;
  color: white; /* Add white text for better contrast on red */
}

This will keep the original working delete functionality, while making the link look exactly like a button.

Solution 2: Use a <button> Element for Delete #

Buttons don't support the href attribute natively, so you need to trigger the navigation manually, or wrap each button in its own per-row form.

Option A: Use onclick to Navigate #

<td><button class="button buttonDelete" th:onclick="|window.location.href='@{/delete/{id}(id=${currentCourses.id})}'|">Delete</button></td>

The th:onclick with Thymeleaf's literal substitution (|...|) will render the correct delete URL for each row.

Option B: Per-Row Form with Submit Button #

If you prefer using a form (better if you ever switch to POST for delete, which is more REST-compliant), wrap each button in a small form inside the table cell:

<td>
  <form th:action="@{/delete/{id}(id=${currentCourses.id})}" method="get">
    <button type="submit" class="button buttonDelete">Delete</button>
  </form>
</td>

This ensures each button submits to the correct delete URL for its row.

Bonus: Better Practice for Delete Actions #

While your current GET-based delete works, using POST (or DELETE) is better practice—it prevents accidental deletions from browser preloading or bookmark clicks. To switch:

1. Update your controller to use @PostMapping instead of @GetMapping
2. Use the per-row form approach above, and set method="post"
3. Add a CSRF token (Thymeleaf will auto-include it if you use th:action)

内容的提问来源于stack exchange，提问作者Spaz