javascript - 动态模态 Bootstrap

Question

我有一个像这样的表:

当用户选择编辑时，它会打开一个 Bootstrap Modal，其中包含从 tr 启动 Modal 的所有 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

我不相信您可以将数据直接传递给模态。但是，您可以使用 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...
});