Thymeleaf餐桌如何创造差距？

Question

为什么我使用下面的代码时，我的百里香叶产生了如此大的差距。

BAD/WARNING 
</h3> 
<h3> 
APPLICATION PROCESSING 
</h3> 
<table class="tablebad"> 
    <tr> 
     <th> Status </th> 
     <th> HostName </th> 
     <th> Process Name </th> 
     <th> Process Count </th> 
    </tr> 
     <tr th:each="DartModel, iterStat : ${countlist}"> 
     <td th:if ="${DartModel.Status == 'BAD'}" th:text="${DartModel.Status}"></td> 
     <td th:if="${DartModel.Status == 'BAD'}" th:text="${DartModel.host}"></td> 
     <td th:if="${DartModel.Status == 'BAD'}" th:text="${DartModel.processName}"></td> 
     <td th:if="${DartModel.Status == 'BAD'}" th:text="${DartModel.processCount}"></td> 
     </tr> 

</table> 


<h3> 
APPLICATION PROCESSING 
</h3> 

<table class="tableok"> 
    <thead> 
    <tr> 
     <th> Status </th> 
     <th> HostName </th> 
     <th> Process Name </th> 
     <th> Process Count </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr th:each="DartModel, iterStat : ${countlist}"> 
     <td th:if="${DartModel.Status == 'OK'}" th:text ="${DartModel.Status}"></td> 
     <td th:if="${DartModel.Status == 'OK'}" th:text="${DartModel.host}"></td> 
     <td th:if="${DartModel.Status == 'OK'}" th:text="${DartModel.processName}"></td> 
     <td th:if="${DartModel.Status == 'OK'}" th:text="${DartModel.processCount}"></td> 
    </tr> 
    </tbody> 
</table> 

结果

下，这将是我的所有数据与 “OK” 的状态中打印出来。我最终试图根据价值对数据进行排序。我尝试使用javascript/jquery，但它太复杂了。我找到了一种基于值拆分数据行的方法。如果数值是“坏”显示表上面反之亦然值与“好” 我是否做错了？ I

Answer 1

问题是，您正在将th:if放在<td>元素上而不是<tr>上。这意味着你的HTML看起来像这样（你有每个非空行之间有一些空行

<table> 
    <tr> 
     <td>BAD</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 

    <tr></tr> 
    <tr></tr> 

    <tr> 
     <td>BAD</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 

    <tr></tr> 
</table> 

你应该只移动th:if到<tr>元素，像这样：

<table class="tablebad"> 
    <tr> 
     <th>Status</th> 
     <th>HostName</th> 
     <th>Process Name</th> 
     <th>Process Count</th> 
    </tr> 

    <tr th:each="DartModel, iterStat : ${countlist}" th:if="${DartModel.Status == 'BAD'}"> 
     <td th:text="${DartModel.Status}" /> 
     <td th:text="${DartModel.host}" /> 
     <td th:text="${DartModel.processName}" /> 
     <td th:text="${DartModel.processCount}" /> 
    </tr> 
</table>