thymeleaf调用onclick传参调用js函数（多参数）写法

最新推荐文章于 2024-03-11 15:55:27 发布
最新推荐文章于 2024-03-11 15:55:27 发布
阅读量3k 收藏 11
点赞数 4
文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SixthMagnitude/article/details/112492674
版权
本文介绍了如何在Thymeleaf中利用`onclick`事件将表格当前行的id和name作为参数传递给JavaScript函数。通过在HTML中设置属性，然后在JS中解析，可以实现多参数传递。
摘要由CSDN通过智能技术生成

实现功能：点击触发，将表格中当前行的id和name传递给js函数

通过th:data-xxxxxx(自定义参数名)="参数值" ,然后将其通过(this.getAttribute('data-xxxxxx')获取该值，多个参数之间直接逗号隔开即可。

html代码

<a href="#" th:data-t_id="${type.id}" th:data-t_name
最低0.47元/天 解锁文章
学个锤子不学了
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Thymeleaf的onclick操作参给 JS
youngmien的博客
08-22 1363
在显示用户页面 show.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>所有用户列表</title> </head> <body> <sc...
thymeleaf 传递数据到js变量
程序员
07-20 4338
thymeleaf js
thymeleaf用js函数
shanahui12的博客
01-10 3520
使用thymeleaf做页面时，如果想要用js函数，有需要传值，那么一定要在引号内使用"|"，"|"，而不是使用"@{}" 调用的前面需要加上javascript:<button type="button" th:onclick="|javascript:dianji('${name}')|" onclick="dianji()" >点击</button> ...
Thymeleaf JS传递多个变量参数
鸟人的博客
11-06 956
thymeleaf中给JS函数传递多个变量参数 <button class="mini ui red basic button" th:onclick="del([[${stu.id}]],[[${currentPage}]]);">删除</button> function del(id,page){ // alert("id:"+id+",pageNum:"+page); if (confirm("确认要删除这条数据吗？")){
Thymeleaf on事件调用js方法
takujo的博客
10-27 5508
例： &lt;button type="button" onclick="location.href='list.html';" th:onclick="|javascript:find('list','${pageNum}')|"&gt;find&lt;/button&gt; &lt;a href="list.html" th:href="|javascript:find
thymeleaf html中的参数向js函数中传递
最新发布
a1783760364的博客
03-11 778
这两种方式都是错误，要么是直接模板引擎崩掉，要是就是只是传递了个字符串。
Thymeleaf中th:onclick传递js函数动态参数
idearn的博客
11-27 2547
使用th:onclick触发的js函数无法传递动态参数问题 问题描述： 使用X-admin后台模板时，跳转页面需要onclick触发xadmin.add_tab函数，该函数的参数url是需要拼装的字符串，因为Thymeleaf版本3.0.10 开始就变更导致以往方法不能使用。下面为函数所传递的参数。 Xadmin.prototype.add_tab = function (title,url,is_refresh) { var id = md5(url);//md5每个url //重复点击 f
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3810
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
工作中遇到的问题(DS)
卷NM呢！不干了！
09-18 947
@RequestParam用法(非必填)加与不加的区别 https://blog.csdn.net/u013805360/article/details/79527175
web 前端一些基础
helloWorldAndYou的博客
11-05 245
gulp 打包 npm国内注册
WebSocket的广播式
实践求真知
09-01 6082
一 点睛 WebSocket为浏览器和服务端提供了双工异步通信的功能，即浏览器可以向服务端发送消息，服务端也可以向浏览器发送消息。WebSocket需浏览器的支持，但一般目前的主流浏览器都支持。 WebSocket是通过一个socket来实现双工异步通信能力的。但是直接使用WebSocket协议开发程序显得特别烦琐，我们会使用它的子协议STOMP，它是一个更高级别的协议，STOMP协议使用一个...
thymeleaf 页面js参数使用${}来传参
weixin_45597857的博客
07-29 2154
th:onclick="|detailslog('${source.isLogin}')|" 用|js函数名称（’参数‘）|的方式使用，如果你想在a标签跳转前使用的话可以： |return js函数名称（’参数‘）| 详情如下： <a th:href="@{${source.url}}" th:onclick="|reutrn detailslog('${source.isLogin}')|" class="url" th:text="${source.sourceFact}" target="_b
Thymeleaf传递给js方法值
热门推荐
wang5701071的博客
07-01 2万+
Thymeleaf 身为SpringBoot的正宫; 推荐模板竟然不被广大开发者热衷. 这就导致了一些听从Spring建议的程序猿遇到Thymeleaf问题无处可问. 我不幸的也中枪了!!! 可以看官方文档的大佬请无视我这个萌新.话入正题, 今天在写项目时 发现Thymeleaf给onclick传递值时如此的困难,试了很多次终于成功了! 代码附上&lt;a th:onclick="'j...
thymeleaf页面调用js方法传参报错：exceptions.TemplateInputException:Only variable expressions returning 。。。
莫道青天真无道，能逍遥时且逍遥！
07-02 2583
使用thymeleaf，html页面调用js方法时候传一个参数, 如下写法不报错: <a th:onclick="'update('+ ${data.id} +');'"> 修改</a> 但是，当传入两个参数的时候，代码如下： <a th:onclick="'update('+${data.id}+','+${data.name}+');'" >修改...
thymeleaf使用js方法参数的传值
weixin_42633244的博客
09-20 6852
thymeleaf中给JS事件传值
GOV_D的博客
11-24 1991
最近在使用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怎么在a链接里调用js带参方法
Magic_JueYuan的博客
06-21 842
我这里使用thymeleaf 的 #numbers.sequence 方法从零开始这里 [[${session.topic[t].tid}]] 使用数值 t 获取列表对应的下标值然后调用js方法给js传值好做异步处理 如果有更好的方法，不足的地方请指教，刚学几个月不怎么熟...
thymeleaf onclick传参
04-22
Thymeleaf中可以使用$符号来获取页面中定义的变量，然后将其作为参数传递给onclick函数，示例代码如下： ``` <button type="button" th:onclick="'myFunction(\'' + ${variable} + '\')'">Click me!</button> ``` 在这个例子中，我们将名为variable的Thymeleaf变量的值作为字符串参数传递给myFunction函数中的单引号中的JavaScript语句。请注意，我们使用了反斜杠来转义单引号。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值