Dynamic modular bootstrap

Question

I have a table like:

When the user selects Edit, he opens a boot tag Modalcontaining everything td trfrom which the modal is launched. What i have done so far:

Get row index in editor. Click:

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

I want to:

$('#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 to pass an index trfrom Edit.clickto a Modal.showfunction?

Answer 1

I do not believe that you can transfer data directly to the modal. However, you can use attributes datato modify the DOM, which can then be read from the event show.bs.modal. Something like that:

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

, .