Thymeleaf onclick 将 td 值发送到 javascript 函数

Posted 2023-03-05

【中文标题】Thymeleaf onclick 将 td 值发送到 javascript 函数

【英文标题】：Thymeleaf onclick send td value to javascript function

【发布时间】：2016-01-04 20:00:12

【问题描述】：

我正在使用“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>

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