thymeleaf a标签 执行 onclick 事件传参数 的写法

Thymeleaf onclick事件传参技巧
最新推荐文章于 2024-11-06 10:24:17 发布
原创 最新推荐文章于 2024-11-06 10:24:17 发布 · 9.4k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Thymeleaf中使用a标签和button标签执行onclick事件并传递参数，包括单个参数和多个参数的传递方法，适用于前端开发人员。

thymeleaf a标签 执行 onclick 事件传参数 的写法：

<a href = "javascript:void(0)"
                   th:onclick = "|javascript : toDeleteUser( '${ user.id }' )|" >删除</a>

或者

<a href = "javascript:void(0)"
                   th:onclick = "'javascript : toDeleteUser(\'' + ${ user.id } + '\')'" >删除</a> 

 

或者 用 button 标签：

<button class="btn btn-small btn-link" type="button"
                   th:onclick = "|javascript : toDeleteUser( '${ user.id }' )|" >删除</button>

 

 

传递两个参数，th:onclick 写成这样， = =

th:onclick= "'javascript:goRead( \''+${item.id}+'\', \''+${cartoon.id}+'\' )'"

 

thymeleaf中如何给onclick事件传值的方法
猿小白的博客
06-22 2560
方法一： 方法二：
thymeleaf使用th:onclick事件涉及添加参数出现错误
xuguoxing123的博客
05-09 1653
Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HT
thymeleaf使用onclick传递参数
这天有点热的博客
07-30 8223
转自Eve慕 Springboot中使用thymeleaf，在用户列表中希望点击删除按钮就删除当前用户，需要传递当前用户的id。 &lt;table class="table table-bordered table-hover"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;id&lt;...
thymeleaf中onclick事件动态传递参数问题
☆往事随風☆的博客
03-31 3136
thymeleaf中onclick事件动态传递参数问题1. 动态传递Number类型或Boolean类型1.1 动态传递一个Number 类型1.2 动态传递一个Boolean类型2. 动态传递字符串类型3. 动态传递多个参数4. 说明 1. 动态传递Number类型或Boolean类型 1.1 动态传递一个Number 类型 <button th:onclick="|test(${session.friend.id})|">测试</button> 1.2 动态传递一个Bool
thymeleaf a标签的onclick属性触发事件 springboot整合oss实现点击下载OSS文件到本地
可控的事情要谨慎，不可控的事情要乐观。
12-11 1306
<!--target="_self" 不跳转至其他页面 本页面打开--> <a href="javascript:void(0)" th:data-id="${ossFile.uuid}" onclick="toDownload(this.getAttribute('data-id'))" target="_self" th:title="${ossFile.fileN...
thymeleaf 页面a标签 onclick传参数使用方式
fengcai0123的专栏
07-04 2万+
thymeleaf a标签onclick 传多个参数给ajax使用,用 ‘’单引号。 &lt;a href="javascript:void(0)" th:onclick= "'javascript:goRead('+${item.id}+','+${cartoon.id}+')'" target="_blank" th:title="${item.title}"&gt; &lt;scrip...
Thymeleaf的onclick操作参给 JS
youngmien的博客
08-22 1473
在显示用户页面 show.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>所有用户列表</title> </head> <body> <sc...
thymeleaf使用th:onclick()事件时出现的版本兼容性问题
Marlon康
11-24 1118
(基于SpringBoot框架企业级应用系统开发全面实战)->{02.09_Thymeleaf实战_recv} 问题： 今天在尝试使用springBoot整合thymeleaf时，使用了th：onclick（）事件 原代码： <button class="btn" th:onclick="'getName(\''+${person.name}+'\');'">获得名字&...
Thymeleaf模板引擎
刻苦的樊同学
11-06 397
工号姓名生日是否已婚工资
SpringBoot与Thymeleaf模板入门整合篇
java1527的博客
09-12 651
11.1 认识 ThymeleafThymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在 C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境下。
springboot + thymeleaf + jquery a标签点击方法（传参）
weixin_45730866的博客
10-18 544
springboot + thymeleaf + jquery a标签点击方法（传参） 引用jquery <script th:src="@{/js/jquery.js}" type="text/javascript"></script> a标签写法 <a th:onclick="removeAddress([[${address.addressId}]],this);" >删除</a> js写法 <script> func
thymeleaf onclick传参问题
qq_16607641的博客
05-17 545
先让你们看下正确的写法，亲测有效！！！！： <a th:data-id="${syx.id}" href="javascript:void(0);" onclick="serarchDataById(this,this.getAttribute('data-id'))" th:text="${syx.sickNessname}"></a> 用thymeleaf 这玩意，是挺方便的，但是根据也很坑，因为都是向下兼容，它和倒好，直接给你弄死了。 开始我的写法是这样的： <
双引号中<a>标签点击事件传参数
未来场景的博客
09-05 895
一，返回A标签，点击事件需要绑定动态参数，要使用转义字符处理 function(d){ return "<div><a href='javascript:void(0)' onclick='gogogo(\""+d.name2+"\",\""+d.name3+"\")' class='layui-table-link'>"+d.name4+"</a>&l...
thymeleaf关于onclick
lucas的博客
04-17 565
双参数 <a th:href="@{#}" th:"addOrderItem([[${c.id}]],[[${session.user.userName}]]);" ></a> 单参数 <a th:href="@{#}" th:"editOrderItem([[${c.id}]]);" >
a标签添加带参数的点击事件
jiuweijava1的博客
08-20 1242
<a onclick=\"downPolicy('" + policyDto.policyNo + "')\" href='javascript:void(0);'>
thymeleaf点击事件实现传值
m0_73956769的博客
01-26 545
【代码】thymeleaf点击事件实现传值。
thymeleaf 的 th:onclick，慢慢采坑
热门推荐
u010592926的专栏
01-12 5万+
这里写自定义目录标题thymeleaf 的 th:onclick 引用的函数参数的入参是 model值的时候注意写法了。3.0.10 开始就变了。 thymeleaf 的 th:onclick 引用的函数参数的入参是 model值的时候注意写法了。3.0.10 开始就变了。 改了好几个小时，总是不生效，实验了各种写法，终于搞清楚了。使用spingboot 2.1.1 (使用的就是)以上的都要注意了...
js创建点击事件中<a>标签onclick传递多个参数
zimuliusu的博客
11-23 1957
var rowIndex = e.rowIndex;　 var t = “&lt;a href=‘javascript:void(0)’ onclick=“viewInfo(’” + rowIndex + “’,’” + ‘温度’ + “’)”&gt;” + t + " “; var t = “&lt;a href=‘javascript:void(0)’ onclick=“viewInfo(’”...
onclick多个方法传递得参数不同
最新发布
08-23
在 HTML 中通过 `onclick` 事件调用多个 JavaScript 函数并为每个函数传递不同的参数，是一种常见的交互场景。实现方式通常包括以下几种： ### 1. 在 `onclick` 中直接调用多个函数 可以直接在 `onclick` 属性中编写多个函数调用，每个函数调用之间使用分号分隔，并分别传递各自的参数。例如： ```html <a href="#" onclick="functionOne('param1', 'param2'); functionTwo(123, 'text')">点击我</a> ``` 这种方式适用于参数固定且 HTML 代码可控的场景。需要注意的是，如果参数是动态生成的（例如来自后端数据），应确保参数值正确拼接并避免语法错误。 ### 2. 使用包装函数调用多个函数 将多个函数调用封装到一个包装函数中，然后在 `onclick` 中调用该包装函数。这种方法更清晰且易于维护。 ```html <a href="#" onclick="handleClick()">点击我</a> ``` ```javascript function handleClick() { functionOne('param1', 'param2'); functionTwo(123, 'text'); } ``` 这种方式适合需要集中管理多个函数调用的场景，尤其是当参数需要动态处理时。 ### 3. 使用 `thymeleaf` 动态传递参数 在使用模板引擎如 Thymeleaf 时，可以通过 `th:onclick` 动态传递参数。例如： ```html <a href="#" th:data-t_id="${type.id}" th:data-t_name="${type.name}" th:onclick="setDelParam(this.getAttribute('data-t_id'), this.getAttribute('data-t_name'))">删除</a> ``` 这种方法适用于从后端动态生成参数并传递给前端函数的场景，能够有效避免手动拼接字符串带来的问题[^4]。 ### 4. 使用 `this` 和自定义数据属性 通过 `this` 和 `data-*` 属性，可以在 `onclick` 事件中获取元素的自定义数据，并传递给多个函数。例如： ```html <a href="#" data-id="123" data-name="example" onclick="handleClick(this)">点击我</a> ``` ```javascript function handleClick(element) { const id = element.getAttribute('data-id'); const name = element.getAttribute('data-name'); functionOne(id, name); functionTwo(id); } ``` 这种方式可以避免参数硬编码，同时提高代码的灵活性和可维护性。 ### 5. 动态拼接 HTML 和函数调用 在动态生成 HTML 时，需要注意参数的拼接方式，确保函数调用的语法正确。例如： ```javascript actions.push('<a onclick="editDevice(\'' + row.id + '\', \'' + row.deviceTypeId + '\')"><i class="fa fa-edit"></i>编辑</a>'); ``` 这种写法常见于表格操作列的生成，确保参数值正确嵌入到函数调用中[^1]。 ##
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值