thymeleaf 传参到js的onclick事件中 以及两种写法 可读性高

最新推荐文章于 2023-06-12 16:55:19 发布
最新推荐文章于 2023-06-12 16:55:19 发布
阅读量757 收藏 2
点赞数 2
分类专栏： 前端页面常用技巧 Thymeleaf 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49610478/article/details/109767395
版权

原始写法

<img th:onclick="'javascript:imgClick(\''+${card.id}+'\',\''+${card.name}+'\');'" />

优化写法，可读性高

th:onclick= "|javascript:edit('${noticemodel.mid}')|"

各有所好，个人偏向于下一种写法，这样非常干净整洁，去除了需要用转义\'来造成的可读性低的问题，副作用暂时没发现……

老秃爵
关注
专栏目录
thymeleaf中如何给onclick事件传值的方法
猿小白的博客
06-22 2075
方法一： 方法二：
thymeleaf中给JS事件传值
GOV_D的博客
11-24 2038
最近在使用layui的弹出层的时候想给点击按钮后触发弹出层的JS方法传递参数，结果鼓捣半天没成功，记录一下最后解决的办法 <main id="layerDemo"> <!--thymeleaf给js方法传递参数--> <a class="btn btn-sm btn-danger " th:userid="${employee.getId()}" onclick="deleteEmp(this.getAttribute('userid'))" >删除</a&
thymeleaf传值onclick到js
weixin_34029949的博客
05-16 286
带有单引号 targetUrl('val') &lt;a th:onclick="'javascript:targetUrl(\''+${indexURL.value}+'\');'"&gt;   不带有单引号： targetUrl(val) &lt;a th:onclick="'javascript:targetUrl('+${indexURL.value}+');'"&gt;   ...
thymeleaf 传参到js的onclick事件中
weixin_30381793的博客
02-27 531
html:<img th:onclick="'javascript:imgClick(\''+${card.id}+'\',\''+${card.name}+'\');'" /> js: function imgClick(greetCardId, name) { $("#greetCardId").val(greetCardId);//Id ...
thymeleaf语法 ---- th:onclick写法问题
id_dimu的博客
04-22 3469
当时写的是：（错误） th:onclick="javascript:getPage(${i},${currentPage})" 想着是不是要编译一下下，整体拼成一个字符串，又修改了：（错误） th:onclick="'javascript:getPage('+${i}+','+${currentPage}+')'" 上网查了，一下，网上直接给了答案，我研究了很久，发现是需要在引用参数的...
thymeleaf（二）点击事件
Sicily_winner的博客
03-28 1万+
注意使用了thymeleaf模板jquery要写在section里面，不然没有效果呢！！！！ajax是用来传输数据的如果说是返回整个页面是window.location.href="接口地址?传输参数名称="+等到的web页面值;&lt;section&gt; &lt;script&gt; $('.aaa').click(function(){ al...
Thymeleaf下设置onclick属性
飞上云端看彩虹
03-17 3396
需要在thymeleaf下设置onclick属性，并调用js文件中的function。 thymeleaf官方文档只是提到了onclick，却不知如何设置，毕竟一堆英文。难嚼！后经百度并验证，可行实例如下： th:onclick="'javascript:buyNow(\''+${courseNew.courseId}+'\')'" 那些“+”，“\”起的作用不明白，暂且先用起来后续再究。 ...
thymeleaf调用onclick传参调用js函数（多参数）写法
SixthMagnitude的博客
01-11 3132
实现功能：点击触发，将表格中当前行的id和name传递给js函数 通过th:data-xxxxxx(自定义参数名)="参数值" ,然后将其通过(this.getAttribute('data-xxxxxx')获取该值，多个参数之间直接逗号隔开即可。 html代码 <a href="#" th:data-t_id="${type.id}" th:data-t_name="${type.name}" th:onclick="setDelParam(this.getAttribute('data-t_i
Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码
08-30
在上面的示例代码中，我们使用 Thymeleaf 的变量表达式来生成 onclick 事件处理函数，例如 `th:onclick="'javascript:check('+${corp.id}+',2)'"`。这个事件处理函数将在点击按钮时被触发，并将 corp.id 和 status ...
thymeleaf传参
最新发布
09-09
在Thymeleaf中，有多种方式可以进行参数传递。 一种常见的方式是通过URL中的查询参数传递参数。你可以在URL中使用Thymeleaf的URL表达式来添加查询参数。例如，使用`th:href`属性可以将参数添加到URL中，然后在目标...
thymeleaf模板使用onclick进行传参
不抛弃、不放弃：Aaron莫言
04-17 1505
<td class="areadef"> <a href="#" th:onclick="'javascript:delRewardBase(\''+${rs.mId}+'\');'">删除</a> </td>
th:onclick传递参数给function
懒人记录处
10-17 2885
发送方 <a th:onclick="'javascript:member_stop(this,\''+${user.id}+'\')'" title="启用"> <i class="layui-icon">&#xe601;</i> </a> 接收方 function member_stop(obj,id) { ...
Thymeleaf - 视图模板技术
qq_46053741的博客
06-12 165
上述代码的作用是，当鼠标点击del.jpg图片时，执行js文件中的delFruit(number）函数（如下），当检测到${fruit.fid}时，自动获取fruit的id填充delFruit(number)中的变量。上述代码中h2上 用 th:object="${fruit}"获取fruit的值，并且保存,然后，在h2内部的任意元素上，可以通过‘ *{属性名}’的方式，来获取fruit中的属性，这样就省去了大量的。当数据量比较多的时候，频繁的写变量名.（例如fruit.）就会非常麻烦。
thymeleaf使用th:onclick()事件时出现的版本兼容性问题
Marlon康
11-24 1055
(基于SpringBoot框架企业级应用系统开发全面实战)->{02.09_Thymeleaf实战_recv} 问题： 今天在尝试使用springBoot整合thymeleaf时，使用了th：onclick（）事件 原代码： <button class="btn" th:onclick="'getName(\''+${person.name}+'\');'">获得名字&...
idea中th:onclick报错问题最终解决办法
seven_devil的博客
09-16 1406
idea中编辑thymeleaf传参报错th:onclick解决办法。
thymeleaf点击onclick事件
小馒头味的博客
12-17 1万+
thymeleaf点击onclick事件 add是方法名，param是参数 th:onclick="'javascript:add('+${param}+')'"
img标签增加点击事件不生效问题解决
yzx3105的博客
06-13 9199
<!--图标--> <div class="col-sm-2 paymentMode-data-materialUrl1"> <input id="materialId1" name="materialId1" type="hidden"/> <input id="materialUrl1" name="materialUrl1" style="width: 156px;height: 78px;" type="image" onclick="open.
img onclick 无效
热门推荐
June的专栏
03-24 1万+
img标签里面的onclick事件无法响应。最终找到了错误原因，是因为img标签的id与onclick事件的方法名相同。于是接着又测试了一下，发现name名和方法名相同也会导致该错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值