因为我是 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">×</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'));
});
希望您能理解我的问题,如有任何帮助,我们将不胜感激。
最佳答案
在点击事件范围之外使用变量:
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);
});
关于javascript - 使用 jQuery 在模式框的按钮单击上获取表行 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51070362/