javascript - 在 thymeleaf table 中动态创建按钮

我正在使用百里香生成一张表，该表代表一个对象列表（小吃）。每份小吃都有许多票数与之相关。我希望每个小吃都有一个按钮，以便用户可以对其投票，增加显示的投票数，然后单击提交按钮后进行更新

    <table class="table table-striped">
    <thead>
      <tr>
        <th>Snacks</th>
        <th>Last Date Purchased</th>
        <th>Votes</th>
        <th>Up Vote</th>
      </tr>
  </thead>
  <tbody>
      <tr th:each="snack,iterStat : ${snacksuggested}">
        <td th:text="${snack.name}"></td>
        <td th:text="${snack.lastPurchaseDate}"></td>
        <td th:text="${snack.votes}"></td>
        <td>
            <button class="btn btn-default" th:id="${'voteBtn_'+(iterStat.count -1)}" th:text="${snack.name} +' Vote'">Up Vote</button>
        </td>
      </tr>
  </tbody>
</table>

如何参考特定的小吃？
我在哪里放置javascript函数定义？
以及如何在单击按钮时更新显示的投票计数？


PS。我正在使用Spring

最佳答案

我没有在春季使用百里香叶。我在jsp页面上使用过jstl。因此，我正在从我的角度向您解释。首先，您应该为要从Javascript / Jquery生成的每个元素提供ID。

因此，回答您的问题：


我们将使用class vote_button引用小吃。每种小吃都将使用相同的类。
您可以将jquery / javascript函数放在脚本标记内的代码末尾，以确保在JQuery启动之前已加载DOM。
您可以为每个包含id的按钮添加一个值。然后，在每次单击时，您都可以获取该id并将其用于引用投票计数。

  <tr th:each="snack,iterStat : ${snacksuggested}">
    <td th:text="${snack.name}" id="snackname_${iterStat.count-1}"></td>
    <td th:text="${snack.lastPurchaseDate} id="purchasedate_${iterStat.count-1}"></td>
    <td th:text="${snack.votes} id="votes_${iterStat.count-1}"></td>
    <td>
        <button class="btn btn-default vote_button" value="${'voteBtn_'+(iterStat.count -1)}" th:id="${'voteBtn_'+(iterStat.count -1)}" th:text="${snack.name} +' Vote'">Up Vote</button>
    </td>
  </tr>

在为表的每个元素分配了ID之后，现在该编写Jquery / Javascript代码了。我们将不得不使用一个类来访问不同的投票按钮。

$( document ).ready(function() {
    $(".vote_button").on('click', function() {
          var id = $(this).val();
          var idArray = id.split('_');
          var voteId= idArray[1];
          var currentVal = $("#votes_"+voteId).html();
          $("#votes_"+voteId).html(currentVal+1);
    });
});

我遇到了您面临的类似情况，这就是我解决的方法。希望对您有帮助。

不建议动态绑定对象。我所做的是，我为每行vote_button提供了相同的类，然后将该类应用于每个动态创建的元素。每次单击votebutton时，我们都可以访问按钮的值或作为vote_id生成的按钮的ID（名称由下划线和ID分隔）。通过拆分此值，我们可以获取要引用的行的id。我们可以通过此id访问该行的任何值，因为每个<td>的名称为name_id（如投票_1，小吃名_1），因为在每一行中，下划线后的数字将相同，并且仅是该位置行。

关于javascript - 在 thymeleaf table 中动态创建按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42477225/