將數據從動態生成的表中的行附加到單元格中的按鈕

Question

我搜索並搜索了很多堆棧，但無法解決我的問題：

我有一個基於胡須值生成的HTML表，其組織方式如下：

         <tbody>
          {{#Result.Rows}}
            <tr id={{deal_id}}>
              <td>{{azuqua_org_id}}</td>
              <td>{{company_name}}</td>
              <td>{{deal_title}}</td>
              <td>{{deal_value}}</td>
              <td>{{csm}}</td>
              <td>{{days_until_renewal}}</td>
              <td class="renewal">{{renewal_date}}</td>
              <td class="dealId">{{deal_id}}</td>
              <td>{{company_org_id}}</td>
              <td>{{#comments}}{{comments}} - {{Comment Last Mod}}{{/comments}}
              <a href="#commentModal" role="button" data-id="{{deal_id}}" id="cmtOpen{{deal_id}}" class="btn btn-custom btn-xs" data-toggle="modal">Comment</a>
              </td>
            </tr>
          {{/Result.Rows}}
        </tbody>

每行的最后一列是一個注釋框，其中有一個小的注釋按鈕，其中顯示了一個模式窗口，該窗口允許您向該單元格添加新注釋。 模態窗口HTML如下：

<div id="commentModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="commentBox" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title">New Comment</h4>
              </div>
              <div class="modal-body">
                <div class="deal-label"
                  <p><span type="text" class="label-sm" id="txtId"/></p>
                <div class="form-group">
                  <p>Type a new comment below:</p>
                  <textarea  id="commentBody"></textarea>
                </div>
              <div class="modal-footer" id="modalButtons">
                  <button class="trigger btn btn-default" type="close" data-dismiss="modal" aria-hidden="true">Cancel</button>
                  <button class="trigger btn btn-primary" type="submit" data-dismiss="modal" id="cmtSubmit">Submit</button>
              </div>
              </div>
            </div>
          </div>
      </div>

這是我的HTML JS：

 $(document).ready(function() { console.log('Document ready'); studio.select("table-2").onPageLoadSuccess(attachKeyupHandler); }); var attachKeyupHandler = function() { $("#searchBar").ready(function() { console.log('searchBar is ready') var sb = $("#searchBar"); console.log(sb); sb.keyup(function(event) { console.log('key up on search bar'); searchFilter(); }); $("#cmtOpen").ready(function() { console.log('CommentBtn is ready') var cmb = $("#cmtOpen{{deal_id}}"); console.log(cmb); cmb.on("click", function(event) { console.log('comment modal opened'); commentClick(); }); $(".btn btn-custom btn-xs").ready(function() { console.log('Submit is ready') var smb = $("#cmtSubmit"); console.log(smb); smb.on("click", function(event) { console.log('Click on Submit Button'); newComment(); }); }); }); }); }; var searchFilter = function() { var input, filter, table, tr, td, i, select; input = document.getElementById("searchBar"); filter = input.value.toUpperCase(); table = document.getElementById("renewals"); tr = table.getElementsByTagName("tr"); col = $("#colFilter option:selected").val(); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[col]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }; var commentClick = function() { var commentId = $(this).data("id"); $("#txtId").val(commentId); console.log(commentId); }; var newComment = function() { var sendCmt = $("#cmtSubmit") sendCmt.on("click", function() { var body = $(this).val("#commentBody"); console.log(body); /*var deal_Id = $(this).attr("data-deal-id"); $.ajax({ type: "POST", url: "https://api.azuqua.com/flo/8f2907de23ab6b0c987afeea9e25b0a7/invoke?clientToken=21efb4ba9c3d7d36e951c2af850b0fcf56cd606913c98ef342f104da1eab6bce", data: {"comment":body, "deal_Id":deal_Id }, statusCode: { 200: function(){ window.location.reload(true); }; }; });*/ }); }; 

我要解決的問題（不向表中的EACH行中添加模式窗口）是如何將按下注釋按鈕的行中的列中的數據與要通過.ajax發送的有效負載相關聯（）POST調用（代碼的注釋部分）。 該問題的一部分還使JS了解我按下的WHICH評論按鈕，我認為從那里我應該能夠弄清楚其余的問題。

我對JS和HTML還是很陌生，所以請讓我知道您看到的任何錯誤或不良做法，我仍在學習！ 我不太確定需要什么，所以我只包括了所有內容。

感謝DevWorld的協助！

Answer 1

您可以在每一行中使用id來唯一標識它，並從那里開始使用jQuery魔術。