2017-02-27 270 views
1

我正在生成一個使用thymeleaf的表格,它代表對象列表(小吃)。每份小吃都有許多與之相關的選票。我想對每個零食這樣用戶就可以選它的按鈕,增加了其顯示的計票結果,然後更新一次點擊提交按鈕在thymeleaf表中動態創建按鈕

<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> 
  1. 我如何引用一個特定的小吃?
  2. 我在哪裏放置javascript函數定義?
  3. 而我該如何更新按鈕點擊顯示的投票計數?

PS。我正在使用彈簧

+0

您可以添加一個初始額外的單元格按行存儲計數器。零食對象沒有ID? – cralfaro

+0

讓我解釋我到目前爲止對編輯問題所做的... –

回答

1

我沒有在春季使用百里香。我在jsp頁面上使用了jstl。所以,我從我的角度來解釋你。首先,你應該爲每一個你從javascript/jquery獲得訪問的元素提供id。

因此,要回答您的疑問:

  1. 我們會參考使用class vote_button小吃。同樣的課程將適用於每一種小吃。

  2. 您可以將jquery/javascript函數放置在腳本標記內的代碼末尾,以確保DOM在JQuery啓動之前已加載。

  3. 您可以爲包含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> 
    

到FO表的每一個元素分配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(like votes_1,snackname_1),因爲在每一行中,下劃線之後的數字將是相同的並且它只是該行的位置。

+0

感謝您的回覆,我喜歡您的答案背後的想法。但是......在閱讀你的答案時,我意識到我還沒有完全得到。 1.我正在考慮將您的腳本js課程放在最後的''是/否? 2。我如何使用動態標記的對象字段(即snackname_1,snackname_2)與數據綁定,可能使用地圖? 3.你可以告訴我在前端開發中沒有太多經驗,你有任何教程建議嗎? –

+0

@JustinD 1.您可以將js代碼放在HTML代碼的最後。 2.不建議動態綁定對象。我做的是,我給每行'vote_button'提供了相同的類,然後將這個類應用到每個動態創建的元素。每次點擊表決按鈕時,我們都可以訪問按鈕的值或以'vote_id'生成的按鈕的ID。通過分割這個值,我們可以得到我們想要引用的行的id。我們可以通過這個'id'訪問任何行的值,因爲每個'​​'的名字都是'name_id'。我也會在答案中加上這一點。 – Ayush