堆棧內存溢出
  簡體   English   中英

Thymeleaf 刪除按鈕與內部 css 不會刪除表行

[英]Thymeleaf delete button with internal css won't delete table row

 原文  2021-11-19 11:42:31  1   2    java/ html/ spring/ thymeleaf

問題描述

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>

Controller

    @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);
    }

2 個解決方案

解決方案1
 0  2021-11-19 13:23:18

該元素沒有 href 屬性。 如果你想使用一個按鈕，你需要把它放在一個表單元素中

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

否則可以使用anchor元素，給css添加一些屬性

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

解決方案2
 0  2021-12-02 19:30:56

弄清楚了。 鏈接的外觀和行為類似於應用了 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; }
 <td><a th:href="@{/delete/{id}(id=${currentCourses.id})}" class = "deleteButton">Delete</a></td>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 GWT單元格表-刪除按鈕不會從表中刪除行 文件不會刪除 Spring JpaRepository 不會刪除表中的行 嘗試在Thymeleaf / Spring MVC中創建一個刪除按鈕 添加按鈕創建行，並刪除以刪除表中的行 SpringBoot / Thymeleaf - 無法刪除 hashmap 密鑰 從表格中刪除行 File.delete（）不會刪除文件 DELETE方法無法正確刪除實體 Delete Button函數從javafx tableView和SQLite表行中刪除選定的行
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM