th:each内部进行条件判断来更改样式

最新推荐文章于 2022-04-20 19:54:50 发布
最新推荐文章于 2022-04-20 19:54:50 发布
阅读量6.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： thymeleaf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43639296/article/details/85830755
本文介绍如何在Thymeleaf中使用th:each遍历集合，并通过条件判断更改元素样式，实现每隔两个元素自动换行的效果。

th:each内部进行条件判断来更改样式


需求 : 遍历集合并每隔两个换行

<div>
    <input type="checkbox"
           th:each ="p,pIndex:${pList}"
           th:utext ="${pIndex.index%2==0?p.name:'p.name+'&lt;/br&gt;'}"
</div>
一文教你学会使用 th:block
Wu_yongtao的博客
04-23 4067
th:block 笔记 文章目录th:block 笔记说明1. 官方文档2. 使用说明3. 特别之处(1) `th:block` 特性(2) 同时控制多个相连标签是否显示(3) 循环同级标签 说明 时间赶的话可以直接看 2 中的粗体部分，和 3 分行被csdn吞了，2 部分排版紧凑点，后续修改一下。 1. 官方文档 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#synthetic-thblock-tag 2. 使用说明
springboot整合Thymeleaf详解
weiha666的博客
02-10 580
Thymeleaf介绍 简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点： Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增...
4）Thymeleaf th:each 循环迭代与 th:if、th:switch 条件判断
热门推荐
蚩尤后裔-汪茂雄
12-02 10万+
目录 th:each 循环迭代 循环基本用法 获取迭代状态 条件判断 th:if th:unless th:switch th:each 循环迭代 循环基本用法 1、对于信息页面，数据格式是一样时，页面通常都是循环迭代它们，写过 JSP 的 JSTL 的就知道，JSTL 有一个<c:foreach>，同理 Thymeleaf 也有一个 th:each。作用都是一...
thymeleaf常用属性--包括th:each,条件判断和th:inline
weixin_52188717的博客
05-27 451
1.基础属性 <body> <h1>text属性：</h1> <h1 th:text="${lff.name}"></h1><br> <p>href属性：</p> <a th:href="@{/href}">查看</a><br> <p>action属性</p> <form th:action="@{/action}" th:method="po
thymeleaf生成动态复选框并获取选中值
海马有力量的博客
02-28 2912
后端controller层把数据放到model中，前端动态生成复选框： <div class="layui-input-block"> <input name="students" type="checkbox" th:each ="student:${studentList}" th:value="${student.id}" th:title="${student.name}" th:attr ="checked=${stude
thymeleaf模板中使用th：each会导致样式失效错乱问题
zongmaomx的博客
03-07 2156
问题：在spring boot项目中使用th:each来遍历数据，结果出来的样式与之前手动填充数据的样式不同。 正确样式： 正确代码： <dl class="fly-panel-main"> <dd th:each="friendLinks:${friendLink}"> <a th:href="${friendLinks.link}...
th:each
gm371200587的博客
05-04 4180
循环加判断：做权限时，菜单动态展示，所以前台的样式中进入默认选中没了，所以想取下标做判断，这里通过 iterStat.index 取得下标，判断完美解决&lt;li th:each="permissions,iterStat:${permissions}"  &gt;                &lt;a  th:attr="data-href=@{${permissions.action...
Thymeleaf th:each遍历，th:if、th:switch 条件判断，input，select，radio 回显赋值
上班搞IT，下班搞ITF。
12-12 4814
1. th:each 遍历 <!-- 遍历集合，如果被遍历的变量 userList 为 null 或者不存在，则不会进行遍历，也不报错--> <tr th:each="user : ${userList}"> <!-- 将用户的主键 uId 存在在 name 属性中--> <td th:text="${user.u...
<tr th:each="folder : ${folders}"> <td style="display: flex;" > <span > <form th:action="@{/show}" method="post"> <input type="hidden" name="objectName" th:value="${folder.getFolderId}"> <input type="hidden" name="objectPath" th:value="${folder.getFolderPath}"> <input type="hidden" name="objectName" th:value="${folder.getFolderName}"> <input type="image" src="/img/查看.jpg" width="150" height="150" th:title="打开文件"></br> </form> </br><p name="objectName" th:text="${folder.getFolderName}"> </span> </td> </tr> </table>怎么在一行显示
05-25
<tr th:each="folder : ${folders}"> <div style="display: inline-block;"> <form th:action="@{/show}" method="post"> <input type="hidden" name="objectName" th:value="${folder.getFolderId}"> ...
表格内容太多怎么隐藏悬停才展示完整内容<div style="max-height: 900px;overflow: auto;"> <table class="table table-hover table-bordered" style="margin-bottom: 0;"> <thead class="bg-light" style="position: sticky; top: 0; z-index: 1;"> <tr class="head-table"> <th>序号</th> <th>异常标识码</th> <th>操作</th> <th>异常类型</th> <th>工段</th> <th>异常来源</th> <th>异常项目</th> <th>异常等级</th> <th>设备</th> <th>批次号</th> <th>站点</th> <th>工艺流程</th> <th>产品料号</th> <th>异常描述</th> <th>异常CODE类型</th> <th>异常数据</th> <th>异常开始时间</th> <th>是否处理</th> <th>处理人员</th> <th>处理备注</th> <th>结案时间</th> </tr> </thead> <tbody> <tr th:each="data,iterStat : ${page.records}" class="center-table"> <td th:text="${iterStat.count}"></td> <td th:text="${data.ALARMTIMEKEY}"></td> <td th:text="${iterStat.count}"></td> <td th:text="${data.ISSUETYPE}"></td> <td th:text="${data.FACTORYNAME}"></td> <td th:text="${data.ALARMTYPE}"></td> <td th:text="${data.ALARMID}"></td> <td th:text="${data.ALARMLEVEL}"></td> <td th:text="${data.MACHINENAME}"></td> <td th:text="${data.LOTNAME}"></td> <td th:text="${data.PROCESSOPERATIONNAME}"></td> <td th:text="${data.PROCESSFLOWNAME}"></td> <td th:text="${data.PRODUCTSPECNAME}"></td> <td th:text="${data.ALARMCOMMENT}"></td> <td th:text="${data.REASONCODETYPE}"></td> <td th:text="${data.REASONCODE}"></td> <td th:text="${data.START_TIME}"></td> <td th:text="${data.SOLVEFLAG}"></td> <td th:text="${data.SOLVE_USER}"></td> <td th:text="${data.SOLVE_REASON}"></td> <td th:text="${data.END_TIME}"></td> </tr> <!-- 空数据提示 --> <tr th:if="${page.records.isEmpty()}"> <td colspan="21" class="text-center text-muted">暂无数据</td> </tr> </tbody> </table> </div>
03-08
假设用户希望所有单元格在内容过长时都进行截断并显示tooltip，那么可以全局设置td的样式： td { max-width: 200px; /* 根据需要调整 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ...
上一页和下一页有问题 <nav th:if="${page.pages > 0}" aria-label="Page navigation"> <ul class="pagination"> <!-- 上一页 --> <li class="page-item" th:classappend="${page.current == 1} ? 'disabled'"> <a class="page-link" th:href="@{${#request.getRequestURI()}( pageNum=${page.current - 1}, pageSize=${page.size} )}" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!-- 页码 --> <li th:each="num : ${#numbers.sequence(1, page.pages)}" class="page-item" th:classappend="${num == page.current} ? 'active'"> <a class="page-link" th:href="@{${#request.getRequestURI()}( pageNum=${num}, pageSize=${page.size} )}" th:text="${num}"></a> </li> <!-- 下一页 --> <li class="page-item" th:classappend="${page.current == page.pages} ? 'disabled'"> <a class="page-link" th:href="@{${#request.getRequestURI()}( pageNum=${page.current + 1}, pageSize=${page.size} )}" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
最新发布
03-11
代码中使用了th:classappend来判断当前页是否为1，如果是则添加disabled类。这里条件表达式写法是否正确？Thymeleaf的条件表达式通常使用th:classappend="${condition} ? 'class-name'"。当前的表达式是${page....
元素的each,动态检查选择内容（对一些checkbox的检查）
老白干的zone
02-14 643
$(function () { $("input").click(function () { var arr = new Array(); $("input:checked").each(function (key, value) { arr[key] = $(value).val(); });//遍历选中元素对象数组往arr中灌值 $("#content").te
java th标签,Thymeleaf中th:each及th:if使用方法解析
weixin_39744894的博客
03-13 1282
一、th:each作用：用于遍历controller层发送过来的集合。例：Controller代码：?下面我们通过th:each属性在html页面将其遍历显示出来?讲解：th:each="user:${users}"其中${users}是将取出名为users的List集合，每次遍历取出List集合中的一个元素赋值给user注意：th:each每次遍历都会生成一个包含它的标签，如我们举的这个例子，u...
th:each迭代循环语法及属性介绍
W888686868的博客
04-20 3006
th:each属性用于迭代循环，语法：th:each="obj,iterStat:${objList}" 迭代对象可以是java.util.List,java.util.Map,数组等; iterStat称作状态变量，属性有： index当前迭代对象的index（从0开始计算） count 当前迭代对象的index(从1开始计算) size:被迭代对象的大小 current当前迭代变量 even/odd布尔值，当前循环是否是偶数/奇数（从0开始计算） first:布尔值，当前循环是否是第一个 last:
解决Thymeleaf 中 th:if、th:each、th:href、th:onclick、th:src等问题亲测
那杯热咖啡
08-10 5410
最近使用若依，对前端的thymeleaf语法不是很熟悉，下面是自己的笔记，大神请忽略。 一、th:if gt: great than（大于）> ge： great equal（大于等于）>= eq： equal（等于）== lt： less than（小于）< le： less equal（小于等于）<= ne： not equal（不等于）!= 写法如下，其它写法类似。 <div th:if="${substringNam...
thymeleaf循环 下标 倍数判断
前往JAVA架构的路上
07-27 8148
问题描述实际开发过程中会遇到每几个倍数的css样式不一样，那么怎么利用thymeleaf来判断实现呢？解决方案模拟数据 List<String> list=new ArrayList<String>(); list.add("1s"); list.add("2s"); list.add("3s"); list.add("4s");
thymeleaf的th:each常见用法
weixin_34417183的博客
08-20 4574
thymeleaf的th:each常见用法 一.th:eath迭代集合用法: <table border="1" id="stuTable"> <tr> <td>是否选中</td> <td>编号</td&...
thymeleaf 如何用th:each 做条件遍历
java_zdc的博客
04-19 3497
更多内容，点击了解：https://how2j.cn/k/springboot/springboot-interation/1740.html目录步骤1:基于前面的知识点步骤2:先运行，看到效果，再学习步骤3:模仿和排错步骤4:TestController步骤5:普通遍历步骤6:带状态的遍历步骤7:结合 select步骤8:结合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值