table 单元格中的多个项目

Question

我正在使用 thymeleaf 开发一个网站，到目前为止它对我来说运行良好，但是当我想在 table 中单独显示多个项目时，它会在行中添加额外的单独单元格值存在。到目前为止，我还没有解决这个问题，如果有人能看到我遗漏的东西，我将不胜感激。

提前致谢！

代码（已编辑）

这里我首先检查是否有处理程序（在数据库中），然后我使用 foreach 将它们全部放在一个列表中，但我无法将所有项目放在单个单元格中（或 table 此处由标签 ) 表示的数据。我将逻辑放在标签中，效果还不错，但是没有数据的行会得到额外的单元格，如下图所示。

<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>

Answer 1

您可以将 Thymeleaf 逻辑从 <td> 标签移动到 <td> 标签内的标签中 - 例如，<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>

table 单元格中的多个项目

Multiple items in table cell

html

java

database

web

thymeleaf