Editable table in PHP

Question

I have a table with a list of companies. I want from a click on the table row to load a modal with the information of this company. Any suggestions on how to do ?

Answer 1

I do this by manipulating the DOM, through custom attributes, like data-id="id-do-teu-registro"

<tr data-id='2'>
  ....
</tr>

In Javascript, I create a function, in which I will make a request via ajax for a php function that will return me the data of the company in json, at the moment I click on the line

$('tabela>tr').on('click',function(){
       var id = $(this).data('id');
       $.ajax({
          url:url-de-requisicao.php
          type:'post',
          dataType:'json',
          data:{id:id},
          success:function(data){
          $('input#nome').val(data.empresa)
          $('input#endereco').val(data.empresa)
          $('#modal-empresa').modal('open');

};
});
});

In this example I am receiving 'data', which are the objects coming from the requested url, and populate the modal form fields.

$.modal() 

It’s a bootstrap library.

I hope I’ve made that kind of problem clearer.

Answer 2

Here is a simple example JSFIDDLE: Here the relation is made between the value of the attribute data-show and the name of the input we have in the form

$('.edit').on('click', function(){
  var dados = $(this).parent().children(); // selecionamos todos os irmãos ('td')
  dados.each(function() {
      console.log($(this).data('show'));
      // relacionaos o valor de dada-show de cada um com o nome dos inputs do form e definimos o valor destes como sendo o texto dentro das ('td')
      $('#myModal input[name="' +$(this).data('show')+ '"]').val($(this).text());
  });
  $('#myModal').modal('show');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<table>


<tr>
    <td data-show="nome">
      nome1
    </td>
    <td data-show="telefone">
      telefone1
    </td>
    <td data-show="email">
      email1
    </td>
    <td data-show="endereco">
      endereço1
    </td>
    <td class="edit"><button class="btn btn-xs btn-primary">Editar</button>
  </tr>
  <tr>
   <td data-show="nome">
      nome2
    </td>
    <td data-show="telefone">
      telefone2
    </td>
    <td data-show="email">
      email2
    </td>
    <td data-show="endereco">
      endereço2
    </td>
    <td class="edit"><button class="btn btn-xs btn-primary">Editar</button>
  </tr>
  <tr>
    <td data-show="nome">
      nome3
    </td>
    <td data-show="telefone">
      telefone3
    </td>
    <td data-show="email">
      email3
    </td>
    <td data-show="endereco">
      endereço3
    </td>
    <td class="edit"><button class="btn btn-xs btn-primary">Editar</button>
    </td>
  </tr>

  </table>

  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
  <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">
            <form method="POST">
               nome
               <input name="nome" type="text">
               <br>
               telefone
               <input name="telefone" type="text">
               <br>
               email
               <input name="email" type="text">
               <br>
               endereço 
               <input name="endereco" type="text">
               <br>
               <input type="submit">
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
     </div>
     </div>