动态模态 Bootstrap

Question

我有一个 table 像：

当用户选择“编辑”时，它会打开一个 bootstrap Modal，其中包含从中启动模态的 tr 的所有 td。到目前为止我所做的是：

在编辑点击时获取行索引：

$(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

当你打开模式时，你不能直接克隆 <tr> 并插入到模式内容中吗？

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

显然需要更多格式。

Answer 2

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

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

动态模态 Bootstrap

Dynamic Modal Bootstrap

html

javascript

jquery

twitter-bootstrap

bootstrap-modal