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

问题描述

因为我是jQuery的新手，所以我在小任务上面临困难.我有一个表，其中每个表行都有一个图标，单击该图标时，将打开一个包含一些单词的模式框.当我关闭该模式框时，我想收集与该模式框相对应的表格行.

I am facing difficulty in small task because I am new to jQuery. I have a table where each table row has a icon, on click of that icon, a modal box opens containing some words. When I close this modal box, I want to gather table row which against that modal box appear.

例如:

table
  row1 +
  row2 +
  row3 +

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

On click of row2 + button, it open modal box, on closing of that modal box , I want that row against that modal box opened that will be 2 in that case.

我写了下面的代码.

模式框:

<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由动态值填充.

On click of modal box it get populated by dynamic value using 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>");
    }
});

然后在单击关闭"按钮时我想要获得行，我得到了这样的行，但它不起作用，

And On click of Close button I want to get row, I am getting row like this but it is not working,

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

所以希望您理解我的问题，对此的任何帮助将不胜感激.

So Hope you understand my question any help regarding this will be appreciated.

推荐答案

在点击事件范围之外使用变量:

Use a variable outside the scope of your click event:

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);
});

这篇关于使用jQuery在模式框的按钮单击上获取表行ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！