使用jQuery在模态框的按钮单击上获取表格行ID

Question

我在小任务中遇到困难，因为我是 jQuery 新手。我有一个表格，其中每个表格行都有一个图标，单击该图标时，会打开一个包含一些单词的模式框。当我关闭此模式框时，我想收集针对该模式框出现的表格行。

例如：

table
  row1 +
  row2 +
  row3 +

单击 row2 + 按钮时，它会打开模态框，在关闭该模态框时，我希望该行与打开的模态框相对，在这种情况下为 2。

我已经编写了如下所示的代码。

模态框：

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Choose words. You can add words, delete words </h4>
      </div>
      <div class="modal-body">
      <!-- <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> -->
      <div class="modal-body-inner"></div>
      </div>
      <div class="modal-footer">
        <button type="button" id = "modelformbuttonclick" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

表格行：

<table>
<tr id="1">
  <td><td>
  <td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span></td> 
</td>
<tr id="2">
  <td><td>
  <td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span></td> 
</td>                   
<tr id="3">
  <td><td>
  <td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span></td> 
</td>  
</table>   

点击模态框时，它会使用 jQuery 填充动态值。

$('tr #modelbox').click(function() {
   var $row = $(this).closest('tr');
   var tbid = $row.attr('id'); // table row ID
   var fieldOption = []
   $row.find('#words option').each(function() { fieldOption.push($(this).val()); });
   console.log(fieldOption);

    $('.modal-body-inner').html('');
    for(var i = 0, size = fieldOption.length; i < size ; i++){
          var item = fieldOption[i];
          $('.modal-body-inner').append("<span class=" + "span1" + " id = "+ tbid +"> "+ item + "</span>");
    }
});

点击关闭按钮我想获取行，我得到这样的行但它不起作用，

$('#modelformbuttonclick').click(function() {
    console.log($(this).closest('tr').data('id'));
    console.log($(event.target).closest('tr').data('id'));
});

所以希望您能理解我的问题，我们将不胜感激。

Answer 1

使用点击事件范围之外的变量：

var tbid;

$('tr #modelbox').click(function() {
   var $row = $(this).closest('tr');
   tbid = $row.attr('id'); // table row ID
   // .......
});

$('#modelformbuttonclick').click(function() {
    console.log("My clicked row was: " + tbid);
});

Answer 2

您可以使用 modal 的 'data' 属性来存储当前的tbid。

$('tr #modelbox').click(function() {
   var $row = $(this).closest('tr');
   var tbid = $row.attr('id'); // table row ID
   var fieldOption = []
   
   // Save to modal Data
   $('#myModal').data('current', tbid);
   
   $row.find('#words option').each(function() { fieldOption.push($(this).val()); });
   // console.log(fieldOption);

    $('.modal-body-inner').html('');
    for(var i = 0, size = fieldOption.length; i < size ; i++){
          var item = fieldOption[i];
          $('.modal-body-inner').append("<span class=" + "span1" + " id = "+ tbid +"> "+ item + "</span>");
    }
});

$('#modelformbuttonclick').click(function() {
    // Read from modal Data
    console.log( $('#myModal').data('current') );
    // console.log($(this).closest('tr').data('id'));
    // console.log($(event.target).closest('tr').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Choose words. You can add words, delete words </h4>
      </div>
      <div class="modal-body">
      <!-- <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> -->
      <div class="modal-body-inner"></div>
      </div>
      <div class="modal-footer">
        <button type="button" id = "modelformbuttonclick" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<table>
<tr id="1">
  <td><td>
  <td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span></td> 
</td>
<tr id="2">
  <td><td>
  <td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span></td> 
</td>                   
<tr id="3">
  <td><td>
  <td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span></td> 
</td>  
</table>