Pass appendTo dynamic rows value to bootstrap modal

Question

I am currently using appendTo to add dynamic rows. What I want to happen is that if I will click one of the td (not including the remove button) , It will open a bootstrap modal window and get the value of other td of its belonging row. here's the image.

Here's my code adding dynamically that I want to get the value of td and pass it to bootstrap modal.

function AddOrder(new_code, new_name, new_qtty, new_cost) {    
    var rows = "";  
    var code = new_code;
    var name = new_name;
    var cost = new_cost;
    var qtty = new_qtty;

    rows += 
        '<tr>"' + 
        '<td class="item_code" data-toggle="modal" data-target="#mymodal">'+code+'</td>'+
        '<td class="item_name" data-toggle="modal" data-target="#mymodal">'+name+'</td>'+       
        '<td class="item_qtty" data-toggle="modal" data-target="#mymodal">'+qtty+'</td>'+ 
        '<td class="item_cost" data-toggle="modal" data-target="#mymodal">'+cost+'</td>'+ 
        '<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
        '</tr>';
    $(rows).appendTo("#dynamic_added tbody");
}

I tried putting putting onclick on td with data-toggle="modal" data-target="#mymodal" but only the modal is working not the function I'm using for example:

function GetData() {
    $('.item_code').click(function(){
        alert($(this).closest('tr').find('.item_code'));
    });
}

Answer 1

Do you want something like this:

 $('.item_code, .item_name, .item_qtty, .item_cost').click(function() { $('.modal-body').html($(this).closest('tr').html()); $('#myModal').modal('show'); }); 

 td { border: 1px solid black; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table id="dynamic_added"> <tbody> <tr> <td class="item_code">code_1</td> <td class="item_name">name_1</td> <td class="item_qtty">qtt_1</td> <td class="item_cost">cost_1</td> <td> <button class="btn remove-button">X</button>+</td> </tr> <tr> <td class="item_code">code_2</td> <td class="item_name">name_2</td> <td class="item_qtty">qtt_2</td> <td class="item_cost">cost_2</td> <td> <button class="btn remove-button">X</button>+</td> </tr> <tr> <td class="item_code">code_3</td> <td class="item_name">name_3</td> <td class="item_qtty">qtt_3</td> <td class="item_cost">cost_3</td> <td> <button class="btn remove-button">X</button>+</td> </tr> </tbody> </table> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Answer 2

I just solved my own problem just a bootstrap modal call is all I am missing. I addded a class getdata that I will call to my javascript function

function AddOrder(new_code, new_name, new_qtty, new_cost) {    
    var rows = "";  
    var code = new_code;
    var name = new_name;
    var cost = new_cost;
    var qtty = new_qtty;

    rows += 
        '<tr>"' + 
        '<td class="item_code getdata" onclick="GetData();">'+code+'</td>'+
        '<td class="item_name getdata" onclick="GetData();">'+name+'</td>'+       
        '<td class="item_qtty getdata" onclick="GetData();">'+qtty+'</td>'+ 
        '<td class="item_cost getdata" onclick="GetData();">'+cost+'</td>'+ 
        '<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
        '</tr>';
    $(rows).appendTo("#dynamic_added tbody");
}

If I will click anywhere to the td except the button It will pop up the modal and pass the current data of that row.

function GetData() {
    $(document).on('click', '.getdata', function(){
        $('#mymodal').modal();
        var modal_code =$(this).closest('tr').find('.item_code').text();
        var modal_name =$(this).closest('tr').find('.item_name').text();
        var modal_qtty =$(this).closest('tr').find('.item_qtty').text();
        var modal_cost =$(this).closest('tr').find('.item_cost').text();

        var modal = $("#mymodal"); // this is the id of my modal 
        modal.find('.modal-body').text(modal_code + modal_name + modal_qtty + modal_cost);
    }); 
}