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

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 魔法。