正确的Thymeleaf中th:each嵌套th:onclick的方法

最新推荐文章于 2023-05-25 23:00:30 发布

追逐梦想永不停

最新推荐文章于 2023-05-25 23:00:30 发布

阅读量1.8k

点赞数 2

分类专栏： 2020.4—— 文章标签： js javascript thymeleaf each onclick

本文链接：https://blog.csdn.net/BHSZZY/article/details/109720835

版权

2020.4—— 专栏收录该内容

100 篇文章 2 订阅

订阅专栏

这篇博客分享了如何在Thymeleaf模板引擎中使用th:onclick属性将遍历列表中的对象值传入JavaScript函数。作者通过一个表格示例展示了如何在编辑和删除操作的链接上设置onclick事件，实现在点击时调用updateFuction和deleteFuction，并正确传递ID、姓名、地址和电话等信息。文章还附带了JavaScript代码片段，证明了这种方法的有效性。

摘要由CSDN通过智能技术生成

最近使用Thymeleaf，想实现th:each嵌套th:onclick，把遍历中的对象的值传入onclick方法；

网上找了一堆方法，总是不能用；然后自己又多次尝试，终于找到能用的方法了。

以下方法亲测绝对可用，onclick中可字母可数字。

代码如下：

<table style="text-align: center; margin-top: 100px; padding: 10px 30px; background-color: white;">
        <tr>
            <td colspan="6">列表页</td>
        </tr>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>地址</td>
            <td>电话</td>
            <td colspan="2"><a href="javascript:void(0)" onclick="insertFuction()">新增</a></td>
        </tr>
        <tr th:each="item : ${list}">

                <td th:text="${item.id}"></td>
                <td th:text="${item.name}"></td>
                <td th:text="${item.address}"></td>
                <td th:text="${item.phone}"></td>
                <td><a href="javascript:void(0)" th:onclick="updateFuction('[(${item.id})]','[(${item.name})]','[(${item.address})]','[(${item.phone})]')">编辑</a></td>
                <td><a href="javascript:void(0)" th:onclick="deleteFuction('[(${item.id})]')">删除</a></td>

        </tr>
</table>

顺便发下script（这个不看也行）：

<script>
function updateFuction(mid,name,address,phone) {
         //通过日志可以查看传入的参数是否正确
         console.log(mid);
         console.log(name);
         console.log(address);
         console.log(phone);
         //省略update请求部分
}
</script>