这是我的前端代码:table tr theach=product productStat $indexProducts thif=$productStatindex 3 == 0 td thv-onclick= getDialogData$productname
thymeleaf语法无法直接在HTML标签中传递参数给JavaScript方法,但你可以通过其他方式实现该功能。以下是两种可能的解决方案:
- 使用data-属性传递参数: 在HTML标签中添加data-属性,将参数值作为属性值传递给JavaScript方法。在你的代码中,将product.name作为参数传递给getDialogData方法,可以这样修改代码:
<td th:attr="data-product-name=${product.name}" th:onclick="getDialogData(this.getAttribute('data-product-name'))">
然后在JavaScript方法中获取data-属性的值,作为参数使用:
getDialogData(productName){
//...
}
- 使用事件委托: 将事件绑定到table元素上,通过事件委托来处理点击事件。在JavaScript中,通过判断点击的元素是td,并获取td内的内容作为参数。在你的代码中,可以这样修改:
<table th:onclick="handleTableClick($event)">
handleTableClick(event){
const target = event.target
if(target.tagName === 'TD'){
const productName = target.querySelector('.ProductName').textContent
this.getDialogData(productName)
}
}
这样,当点击td元素时,会调用handleTableClick方法,判断点击的元素是否是td,并获取td内的内容作为参数,然后调用getDialogData方法。
请根据你的需求选择其中一种方法进行修改
原文地址: https://www.cveoy.top/t/topic/iUi6 著作权归作者所有。请勿转载和采集!