从动态生成的表格中的行将数据附加到单元格中的按钮

Question

我已经搜索了很多堆栈并且无法解决我的问题：

我有一个基于 mustache 值生成的 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);
          };
        };
      });*/
    });
  };

    
    
    

我要解决的问题（不向表中的每一行添加模式窗口）是如何将按下评论按钮的行中的列中的数据与我要发送的有效负载相关联一个 .ajax() POST 调用（代码的注释掉部分）。该问题的一部分也是让 JS 了解我正在按下哪个评论按钮，我认为从那里我应该能够弄清楚其余的。

我对 JS 和 HTML 还很陌生，所以请告诉我你看到的任何错误或不良做法，我还在学习！我不太确定需要什么，所以我只包含了所有内容。

感谢 DevWorld 的帮助！

Answer 1

您可以使用每一行中的 id 来唯一标识它，并从那里使用一些 jQuery 魔法。