值为空时如何隐藏表格行答案

【问题标题】：How to hide table rows when the value is null值为空时如何隐藏表格行
【发布时间】：2018-08-09 04:05:12
【问题描述】：

我正在 Eclipse 中创建一个项目，我想在其中显示输入到表格中的值。我希望该表仅显示具有值的行，但无法弄清楚如何执行此操作。到目前为止，我刚刚添加了多行并且正在使用display:none 以便不显示它们，但我想不出一种方法来显示th:text="${name1}"。

这是我目前的做法的一个例子：

<table id="table">
    <tr id="tableRow">
      <th class="tableHeader">Name</th>
      <th class="tableHeader">Description</th>
    </tr>
    <tr id="tableRow" style="display:none">
      <td class="tableCell" th:text="${name1}"></td>
      <td class="tableCell" th:text="${description1}"></td>
    </tr>
    <tr id="tableRow" style="display:none">
      <td class="tableCell" th:text="${name2}"></td>
      <td class="tableCell" th:text="${description2}"></td>
    </tr>
    <tr id="tableRow" style="display:none">
      <td class="tableCell" th:text="${name3}"></td>
      <td class="tableCell" th:text="${description3}"></td>
    </tr>
</table>

我对编码比较陌生，因此我们将不胜感激。

【问题讨论】：

我不确定这是什么：th:text="${description3}?我不知道这样的属性，$ 看起来更像 PHP 而不是 JavaScript。
@domsson 这是百里香叶，我在本地主机上运行它并从 h2 数据库中提取表单中写入的内容。
啊，在我输入评论时，刚刚注意到问题已从 Javascript 重新标记为 Java。现在更有意义了。我冒昧地为你添加了百里香标签。
@domsson 不用担心 :)

标签： java html thymeleaf

【解决方案1】：

您需要在使用之前测试值

<table id="table">
        <tr id="tableRow">
            <th class="tableHeader">Name</th>
            <th class="tableHeader">Description</th>
        </tr>
        <tr id="tableRow" th:if="${name1 != null or description1 != null}">
            <td class="tableCell" th:text="${name1}"></td>
            <td class="tableCell" th:text="${description1}"></td>
        </tr>
        <tr id="tableRow" th:if="${name2 != null or description2 != null}">
            <td class="tableCell" th:text="${name2}"></td>
            <td class="tableCell" th:text="${description2}"></td>
        </tr>
        <tr id="tableRow" th:if="${name3 != null or description3 != null}">
            <td class="tableCell" th:text="${name3}"></td>
            <td class="tableCell" th:text="${description3}"></td>
        </tr>
</table>

【讨论】：

【解决方案2】：

我找到了一个使用th:each的好方法：

    <table id="table">
        <tr id="tableRow">
            <th class="tableHeader">Name</th>
            <th class="tableHeader">Description</th>
        </tr>
        <tr id="tableRow" th:each="inputMap : ${InputMap}">
            <td class="tableCell" th:text="${inputMap.value.name}"></td>
            <td class="tableCell" th:text="${inputMap.value.description}"></td>
        </tr> 
    </table>

${InputMap} 来自我的控制器：

@GetMapping("/tablePage")
public void getTableData(Model model) {

    inputRepository.findAll().forEach(inputObject -> {
        inputMap.put(inputObject.id, inputObject);
    });

    if (inputMap != null){
        inputMap.forEach((id, i) -> {
            model.addAttribute(id + "name", id + i.getName());
            model.addAttribute(id + "description", id + i.getDescription());
        });
    }

    model.addAttribute("InputMap", inputMap);
}

【讨论】：