动态模态引导程序

Question

我有一张像这样的表：

当用户选择“编辑”时，它会打开一个引导程序Modal，其中包含发起模态的td tr。到目前为止我所做的是：

在编辑点击获取行索引：

$(document).on('click', '#editNominHref', function(e) {
    var global_edit_row = $(this).closest('tr').index();
    $('#editNomiModal').modal('show');  
});

我想要的是：

$('#editNomiModal').on('show.bs.modal', function ()  {
    $("#Name_feild_of_Modal").val(name_in_td_of_nth_Tr);
   // ..Similar for DOB, Relation and share%..
});

问题：

如何将tr索引从Edit.click传递到Modal.show函数？

Answer 1

我不相信你可以直接将数据传递给模态。但是，您可以使用data属性来修改DOM，然后可以从show.bs.modal事件中读取该DOM。像这样：

$(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...
});

Answer 2

当你打开模态时，你不能克隆<tr>并插入模态内容吗？

$(document).on('click', '#editNominHref', function(e) {
    var content = $(this).closest('tr').html();
    $('#editNomiModal').find('modal-content').html(content).modal('show');  
});

显然需要更多格式化。