[英]Dynamic Modal Bootstrap
I have a table like: 我有一张桌子:
When user selects Edit, it opens up a bootstrap Modal
containing all td
of the tr
the Modal is launched from. 当用户选择Edit时,它会打开一个bootstrap
Modal
其中包含从Modal启动的tr
的所有td
。 What I've done so far is: 到目前为止我所做的是:
Get Row Index on Edit Click: 编辑点击获取行索引:
$(document).on('click', '#editNominHref', function(e) {
var global_edit_row = $(this).closest('tr').index();
$('#editNomiModal').modal('show');
});
What I want is: 我想要的是:
$('#editNomiModal').on('show.bs.modal', function () {
$("#Name_feild_of_Modal").val(name_in_td_of_nth_Tr);
// ..Similar for DOB, Relation and share%..
});
Question: 题:
How do I pass the tr
index from Edit.click
to Modal.show
function? 如何将
tr
索引从Edit.click
给Modal.show
函数?
I don't believe you can pass data directly to the modal. 我不相信你可以直接将数据传递给模态。 However, you can use
data
attributes to modify the DOM which can then be read from the show.bs.modal
event. 但是,您可以使用
data
属性来修改DOM,然后可以从show.bs.modal
事件中读取该DOM。 Something like this: 像这样的东西:
$(document).on('click', '#editNominHref', function(e) {
$('#editNomiModal')
.data('row-index', $(this).closest('tr').index())
.modal('show');
});
$('#editNomiModal').on('show.bs.modal', function () {
var $tr = $('#myTable tr').eq($(this).data('row-index'));
var serial = $tr.find('td:eq(0)').text();
var name = $tr.find('td:eq(1)').text();
// and so on...
$("#Serial_field_of_Modal").val(serial);
$("#Name_field_of_Modal").val(name);
// and so on...
});
When you open the modal can't you just clone the <tr>
and insert into modal-content? 当你打开模态时,你不能只是克隆
<tr>
并插入模态内容吗?
$(document).on('click', '#editNominHref', function(e) {
var content = $(this).closest('tr').html();
$('#editNomiModal').find('modal-content').html(content).modal('show');
});
Obviously more formatting would be required. 显然需要更多格式化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.