Click Button On Row Of The Table And Show Values In Modal-window

I make a web site with bootstrap and bootstrap table. To add element into boostrap-table I using php. The problem is when I click to the edit button doesn't show on modal-window th

Solution 1:

The click event should be associated with button not the table :

$('.btn-edit').click(function() {

            var $row = $(this).closest("tr"),

            $tdata = $row.find("td");

            console.log($(this).text());

            $.each($tdata, function(index, value) {
                alert ('Entró');
                console.log($(this).text()); 
                $( "input:eq(" + index + ")").val($(this).text());
            });
            $('#edit').modal('show')
        }); 

Your edit button trigger the bootstrap modal : you could either remove data-toggle='modal' from your edit button and trigger the modal programatically in the click event $('#edit').modal('show') . Or use the modal events show.bs.modal as follow

$('#edit').on('show.bs.modal', function (event) {
  var $button = $(event.relatedTarget) // Button that triggered the modalvar $row = $button.closest("tr"),

        $tdata = $row.find("td");

        console.log($button.text());

        $.each($tdata, function(index, value) {
            alert ('Entró');
            console.log($(this).text()); 
            $( "input:eq(" + index + ")").val($(this).text());
        });
 });