带有内部css的Thymeleaf删除按钮不会删除表行答案

【问题标题】：Thymeleaf delete button with internal css won't delete table row带有内部css的Thymeleaf删除按钮不会删除表行
【发布时间】：2021-12-03 03:30:56
【问题描述】：

HTML

这个完成了我想要它做的事情，但只是一个链接

<td><a th:href="@{/delete/{id}(id=${currentCourses.id})}">Delete</a></td><!-- WORKS redirects to /delete/id# -->

如何让它与我的内部 css 一起使用？我已经尝试过这些，但无法让它们中的任何一个工作。他们只是重新加载页面而不删除该行。

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

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

CSS

.buttonDelete {
    background-color: red;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

按钮所在的完整 HTML（其混乱，正在进行中）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>View All Courses - Administrator</title>
</head>
<style>
th {
    background-color: #87CEEB;
    color: black;
    font-weight: bold;
    font-size: 110%;
    font-style: normal;
    text-align: center;
    vertical-align: center;
}

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.buttonAdd {
    background-color: lightgreen;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

.buttonEdit {
    background-color: yellow;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

.buttonDelete {
    background-color: red;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

.tableContents {
    text-align: left;
}
</style>
<body>
    <select id="subject">
        <option value="" disabled selected>Select Search Parameter</option>
        <option value="0">ID</option>
        <option value="1">CRN</option>
        <option value="2">Course Title</option>
        <option value="3">Enrolled</option>
        <option value="4">Teacher</option>
        <option value="5">Email</option>
    </select>
    <input type="text" id="searchInput" onkeyup="selectedSearch()" placeholder="Search">
    <form action="@{/delete/{id}(id=${currentCourses.id})}" method="get">
        <table id="adminTable">
            <tr>
                <th>ID</th>
                <th>CRN</th>
                <th>Course Title</th>
                <!-- <th>Students Enrolled</th> -->
                <th>Teacher</th>
                <th>Email</th>
            </tr>
            <tr th:each="currentCourses, rowStat : ${courses}"> 
                <td th:text="${currentCourses.id}" />
                <td th:text="${currentCourses.courseId}" />
                <td th:text="${currentCourses.courseName}" />
                <!--   <td th:text="${currentCourses.courseApplied}" />-->
                <td th:text="${currentCourses.teacher.lastName}" />
                <td th:text="${currentCourses.teacher.email}" />
                
                <!--  <td><button class="button buttonEdit" th:href="@{/edit/{id}(id=${currentCourses.id})}">Edit</button></td><!-- Stylized button, needs work -->
                <td><a th:href="@{/edit/{id}(id=${currentCourses.id})}">Edit</a></td><!-- WORKS redirects to /delete/id# -->
                 <!--<td><button class="button buttonDelete" th:action="@{/delete/{id}(id=${currentCourses.id})}">Delete1</button></td><!-- Stylized button, needs work -->         
                <td><a th:href="@{/delete/{id}(id=${currentCourses.id})}">Delete</a></td><!-- WORKS redirects to /delete/id# -->
              

            </tr>
            
        </table>
    </form>
    <button class="button buttonAdd" onclick="window.location.href='/inputCourse';">Add</button>

    <script>

var menu = document.getElementById("subject");
menu.addEventListener("change", selectedSearch);

function selectedSearch(event) {
  if (menu.value == '0') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
  } else if (menu.value == '1') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
  } else if (menu.value == '2') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
    }
  } else if (menu.value == '3') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
    }
  } else if (menu.value == '4') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }   
    }
  } else if (menu.value == '5') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[5];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }  
    }
  } else if (menu.value == '6') {
    var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[6];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  } 
  }
}


</script>
</body>
</html>

控制器

    @GetMapping("/delete/{id}")
    public String deleteCourse(@PathVariable("id") long id, Model model) {
        Course c = repo.findById(id).orElse(null);
        repo.delete(c);
        return viewAllCourses(model);
    }

【问题讨论】：

标签： java html spring thymeleaf

【解决方案1】：

该元素没有 href 属性。如果你想使用一个按钮，你需要把它放在一个表单元素中

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

否则，你可以使用锚元素，给css添加一些属性

.buttonDelete {
    display: block;
    padding: .5em 1em;
    background-color: red;
    border-radius: 6px;
    border-color: black;
    font-weight: bold;
}

【讨论】：

如果我在同一页面上有类似的编辑按钮，如何使用表单元素？
更新了帖子以显示完整的 HTML
编辑按钮是一个锚元素（不是按钮元素）。我建议您也将锚元素用于“删除按钮”。如果您想使用按钮元素，则需要为每个按钮放置一个表单，因为 id 在表单的操作中

【解决方案2】：

想通了。链接的外观和行为就像一个应用了 CSS 的按钮。

a.deleteButton{
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
   background: red;
   padding: 3px 7px;
   border-radius: 20px;
   color: white;
   font-size: 12px;
   font-family: Helvetica, Arial, Sans-Serif;
   vertical-align: middle;
}

&lt;td&gt;&lt;a th:href="@{/delete/{id}(id=${currentCourses.id})}" class = "deleteButton"&gt;Delete&lt;/a&gt;&lt;/td&gt;

【讨论】：

也许还添加cursor: pointer 会有所帮助:)