因为我是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>
单击modal框时,它会使用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>");
}
});
当点击Close按钮时,我想获取行,我这样获取行,但它不起作用,
$('#modelformbuttonclick').click(function() {
console.log($(this).closest('tr').data('id'));
console.log($(event.target).closest('tr').data('id'));
});
所以希望你能理解我的问题,任何有关这方面的帮助都将不胜感激。
使用click事件范围之外的变量:
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);
});