我正在使用 thymeleaf 開發一個網站，到目前為止它對我來說一直很好，但是當我想在表格中以單個方式呈現多個專案時，它會在存在值的行上添加額外的單獨單元格。到目前為止，我還沒有解決這些問題的方法，如果其他人能看到我遺漏的東西，我將不勝感激。
提前致謝！
代碼（已編輯）
在這里，我首先檢查是否有處理程式（在資料庫中），然后我使用 foreach 將它們全部放在一個串列中，但我無法將所有專案放在單個單元格中（或此處由 tag 表示的表資料）。我已經將邏輯放在標簽中，它運行得很好，但是沒有資料的行會獲得額外的單元格，如下圖所示。
<td > th:if="${place.getHandler} != null" th:each="handlerList : ${place.getHandler}" th:text="${handlerList.name}"></td>
新代碼
<td> <span th:if="${place.getHandler} != null" th:each="handlerList : ${place.getHandler}" th:text="${handlerList.name}"></span></td>
整個代碼
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="has-navbar-fixed-top">
<head th:replace="common_fragments/header :: header">
<meta charset="utf-8">
<link rel="stylesheet" href="../../../../public/css/font-awesome.min.css"/>
<link rel="stylesheet" href="../../../../public/css/bulma_custom.min.css"/>
</head>
<body>
<div id="navbar-top">
<nav th:replace="logged_in/admin/fragments/navbar :: nav"></nav>
</div>
<main>
<section class="section">
<div class="container">
<h1 class="title">
matchade studenter
</h1>
<hr>
<div class="content is-medium">
<table id="table" class="table is-bordered is-narrow is-hoverable">
<thead>
<tr>
<th>Student</th>
<th>Student email</th>
<th>Student mobilnummer</th>
<th>Enhet</th>
<th>Handledare</th>
<th>Handledare email</th>
<th>Handledare mobilnummer</th>
</tr>
</thead>
<tbody>
<tr th:each="place : ${places}">
<td th:text="${place.student.studentData.name}"></td>
<td th:text="${place.student.studentData.email}"></td>
<td th:if="${place.student.studentData.phoneNumber} != ''" th:text="${place.student.studentData.phoneNumber}"></td>
<td th:if="${place.student.studentData.phoneNumber} == ''" >
<p class="icon has-text-danger">
<i class="fa fa-lg fa-times"></i>
</p>
</td>
<td th:text="|${place.unit.name} (Regioner: ${place.unit.municipality.getRegionNamesString}, Kommuner: ${place.unit.municipality.name})|"></td>
<td> <span th:if="${place.getHandledare} != null" th:each="handledareList : ${place.getHandledare}" th:text="${handledareList.name}"></span></td>
<td th:if="${place.getHandledare} != null" th:text="${place.getHandledare[0].email}"></td>
<td th:if="${place.getHandledare} == null">
<p class="icon has-text-danger">
<i class="fa fa-lg fa-times"></i>
</p>
</td>
<td th:if="${place.getHandledare} == null">
<p class="icon has-text-danger">
<i class="fa fa-lg fa-times"></i>
</p>
</td>
<div th:if="${place.getHandledare} != null">
<td th:if="${place.getHandledare[0].phoneNumber} != ''" th:text="${place.getHandledare[0].phoneNumber}"></td>
</div>
<div th:if="${place.getHandledare} == null">
<td >
<p class="icon has-text-danger">
<i class="fa fa-lg fa-times"></i>
</p>
</td>
</div>
<div th:if="${place.getHandledare} != null">
<td th:if="${place.getHandledare[0].phoneNumber} == '' ">
<p class="icon has-text-danger">
<i class="fa fa-lg fa-times"></i>
</p>
</td>
</td>
</div>
</tr>
</tbody>
</table>
<br>
<button class="button is-large is-success" id="download-button">ladda ner matchning resultat</button>
<br>
<br>
</div>
</div>
</section>
</main>
<footer th:replace="common_fragments/footer :: footer"></footer>
<script>
function htmlToCSV(html, filename) {
var data = [];
var rows = document.querySelectorAll("table tr");
for (var i = 0; i < rows.length; i ) {
var row = [], cols = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cols.length; j ) {
row.push(cols[j].innerText);
}
data.push(row.join(";"));
}
downloadCSVFile(data.join("\n"), filename);
}
</script>
<script>
function downloadCSVFile(csv, filename) {
var csv_file, download_link;
csv_file = new Blob(["\uFEFF" csv], {type: "text/csv"});
download_link = document.createElement("a");
download_link.download = filename;
download_link.href = window.URL.createObjectURL(csv_file);
download_link.style.display = "none";
document.body.appendChild(download_link);
download_link.click();
}
</script>
<script>
document.getElementById("download-button").addEventListener("click", function () {
var html = document.querySelector("table").outerHTML;
htmlToCSV(html, "matchning.csv");
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
您可以將 Thymeleaf 邏輯從<td>標簽移動到標簽內的<td>標簽中 - 例如，a <span>：
<td>
<span th:if="${place.getHandler} != null"
th:each="handlerList : ${place.getHandler}"
th:text="${handlerList.name}"></span>
</td>
從那里你可以添加任何你可能需要的 CSS 來格式化跨度。
如果您有<td>需要抑制的額外單元格，請將th:if運算式移至<td>標簽內：
<td th:if="${place.getHandler} != null">
<span th:each="handlerList : ${place.getHandler}"
th:text="${handlerList.name}"></span>
</td>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/372326.html