Thymeleaf onclick 将 td 值发送到 javascript 函数答案

【问题标题】：Thymeleaf onclick send td value to javascript functionThymeleaf onclick 将 td 值发送到 javascript 函数
【发布时间】：2023-03-20 18:57:02
【问题描述】：

我正在使用“Thymeleaf”，我想将值发送到 javascript，我是新手，我正在尝试以下代码：

onclick="getPropId('${properties.id}')"

和功能

getPropId(inputID){alert(inputId);}

但我没有得到实际价值。

【问题讨论】：

您需要告诉我们实际值是什么，而不是您的期望值。我的想法在于插值周围的单引号
感谢您的快速回复。 Thmeleaf 代码如下，我正在遍历“属性”表，我正在显示名称，我需要获取“Property.ID”，我希望在我的 javascript 函数中使用这个 ID 值。和 javascript 是 function getPropId(inputID){ alert(inputID ); }
请将该代码编辑到您的问题中。另外，你做了什么调试？有错误吗？检查的 HTML 是否产生正确的 ID？
我通过属性表进行迭代，使用 ${properties.id} 获取 id 的值，例如“1”表示第一次迭代，“2”表示第二次迭代..现在我正在显示 ${ UI 网页中的 properties.name}。它也有编辑按钮，当点击编辑按钮时，我想获取它的 ID 值，所以在 onclick 事件中我试图将 ${properties.id} 发送到 Javascript 函数“function getPropId(inputID)”，这里是参数' inputID' 指的是 'properties.id' 但我已经尝试在函数内部提醒它，但它没有显示 properties.id 值。没有 javascript 错误，HTML 会正确生成正确的 ID

【解决方案1】：

以上问题现已解决，我们需要使用 Thymeleaf 特定语法。

th:onclick="'getPropId(\'' + ${properties.id} + '\');'"

现在，如果它在 javascript 函数中显示正确的 properties.id。

function getPropId(inputID){
    alert(inputID);
}

【讨论】：

【解决方案2】：

对于传递多个参数，您可以使用以下内容：

th:onclick="'doSomething(\''+${val1}+ '\',\''+${val2}+'\',\''+${val3}+'\');'"

【讨论】：

【解决方案3】：

带有文字替换的清洁器||：

th:onclick="|getPropId('${properties.id}');|"

多种情况：

th:onclick="|getPropId('${var1}','${var2}');|"

【讨论】：

【解决方案4】：

我通过声明 th:attribute 解决了同样的问题

<div class="row" th:each="data,i : ${obj}">
    <a href="javascript:void(0);" th:attr="onclick='loadDetails(\'' + ${data.objId}+'\')'">
</a>
</div>

【讨论】：

【解决方案5】：

未来的访客，

让我向您介绍一种更简单的方法。

是的，您可以使用 ' 或 |甚至使用 [[]] 但问题是：它是否干净且易于实施？

我们大多数人会浪费 10 多分钟来尝试找出正确使用 '',,|| 的方法使这条线工作。

为什么不简单地为每个参数添加数据属性并在函数上使用它呢？像这样的：

<button th:data-param1="${value}" th:data-param2="${value2}" onclick="call(this);"/>

然后是函数：

<script>
  function call(e){
    const param1 = e.dataset.param1;
    const param2 = e.dataset.param2;
  }
</script>

我让您判断更好的执行方式，但请记住，有人可能会追随您并阅读您的代码。因此，请始终保持其可读性和易于维护。

【讨论】：