Insert a select into a td by double clicking it is possible?

In addition to the object to be loaded, it has the select encoding and the value selected to be the last value chosen. A var items was placed with 3 fixed items. What can be done is to bring the formatted information so that select is loaded.

Can be loaded via ajax no problem, just add in that code, but you could edit your question and put the table name, the fields and whether you are using PDO or Mysqli to propose this solution.

Example:

var items = [{
    value: 1,
    title: 'Gerente'
  },
  {
    value: 2,
    title: 'Administrador'
  },
  {
    value: 3,
    title: 'Operário'
  }
];
$(document).ready(function() {
  $('#tblEditavel tbody tr td.editavel').dblclick(
    function() {
      if ($('td > input').length > 0) {
        return;
      }
      var conteudoOriginal = $(this).text();
      var novoElemento = $('<select/>');

      $.each(items, function(a, b) {        
        var opt = document.createElement("option");
        if (b.title == conteudoOriginal) {
          opt.setAttribute('selected', 'selected');
        }
        opt.value = b.value;
        opt.innerHTML = b.title;
        novoElemento[0].appendChild(opt);
      });
      novoElemento.bind('change', function() 
      {
        conteudoOriginal = $(this.name + " option:selected").text();
      });
      $(this).html(novoElemento.bind('blur keydown', function(e) {
        var keyCode = e.which;
        var conteudoNovo = $(this).val();
        if (keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
          var objeto = $(this);
          $.ajax({
            type: "POST",
            url: "atualiza_tipo.html",
            data: {
              id: $(this).parents('tr').children().first().text(),
              campo: $(this).parent().attr('title'),
              valor: conteudoNovo
            }, //added this comma here
            success: function(result) {
              objeto.parent().html(conteudoNovo);
              $('body').append(result);
            }
          })
        } else if (keyCode == 27 || e.type == 'blur') {
          $(this).parent().html(conteudoOriginal);
        }
      }));
      $(this).children().select();
    });
})

table,
td {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="tblEditavel" class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Tipo</th>
      <th>Nome</th>
      <th>Data</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td title="Nome" class="editavel">Gerente</td>
      <td>Fulano</td>
      <td>01/10/2007</td>
    </tr>
    <tr>
      <td>123</td>
      <td title="Nome" class="editavel">Administrador</td>
      <td>Fulano</td>
      <td>01/10/2007</td>
    </tr>
    <tr>
      <td>123</td>
      <td title="Nome" class="editavel">Operário</td>
      <td>Fulano</td>
      <td>01/10/2007</td>
    </tr>
  </tbody>
</table>

It helped me a lot with the example of the combo, but it has a problem, if you click on the last combo and select an item and then on the top and select something, the combo below concatenates the combo combo underneath with the one selected in the combo from above. Something else, you need to double-click. I made some changes and I think it was good! Now just click once and do not duplicate the selected items. I hope you like it.

    <title>Tabela Editável</title>

    <!-- jquery - link cdn -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><!--bootstrap-linkcdn--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script type="text/javascript">
        var items = [{
            value: 1,
            title: 'Gerente'
          },
          {
            value: 2,
            title: 'Administrador'
          },
          {
            value: 3,
            title: 'Operário'
          }
        ];

        var lin_col = "0,-1";
        var lin_col_anterior = "-1,0";
        function infoCel(x, y){
            lin_col = x+","+y;  

        }

        $(document).ready(function() {


          $('#tblEditavel tbody tr td.editavel').click(
            function() {
                //alert('Você  '+lin_col+' input  td '+lin_col_anterior);

                if(lin_col_anterior != lin_col) {                         
                      if ($('td > input').length > 0) {
                        return;
                      }
                      var conteudoOriginal = $(this).text();
                      var novoElemento = $('<select />');

                      $.each(items, function(a, b) {        
                        var opt = document.createElement("option");
                        if (b.title == conteudoOriginal) {
                          opt.setAttribute('selected', 'selected');
                        }
                        opt.value = b.value;
                        opt.innerHTML = b.title;
                        novoElemento[0].appendChild(opt);
                      });
                      novoElemento.bind('change', function() 
                      {
                        conteudoOriginal = $(this.name + " option:selected").text();
                      });
                      $(this).html(novoElemento.bind('blur keydown', function(e) {
                        var keyCode = e.which;
                        var conteudoNovo = $(this).val();
                        if (keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
                          var objeto = $(this);
                              objeto.parent().html(conteudoNovo);
                        } else if (keyCode == 27 || e.type == 'blur') {
                          $(this).parent().html(conteudoOriginal);
                        }
                      }));
                      $(this).children().select();
                  } else {
                        //$(this).parent().html(conteudoOriginal);
                  }
                  lin_col_anterior = lin_col;
            });

        })

    </script>
    <style type="text/css">
        table,td {
          border: 1px solid red;
        }
    </style>
</head>

<body>
    <h4><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="tblEditavel" class="table table-striped table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Tipo</th>
          <th>Nome</th>
          <th>Data</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td onClick="infoCel(0, 0)">123</td>
          <td title="Nome" class="editavel" onClick="infoCel(0, 1)">Gerente</td>
          <td onClick="infoCel(0, 2)">Fulano</td>
          <td onClick="infoCel(0, 3)">01/10/2007</td>
        </tr>
        <tr>
          <td onClick="infoCel(1, 0)">123</td>
          <td title="Nome" class="editavel" onClick="infoCel(1, 1)">Administrador</td>
          <td onClick="infoCel(1, 2)">Fulano</td>
          <td onClick="infoCel(1, 3)">01/10/2007</td>
        </tr>
        <tr>
          <td onClick="infoCel(2, 0)">123</td>
          <td title="Nome" class="editavel" onClick="infoCel(2, 1)">Operário</td>
          <td onClick="infoCel(2, 2)">Fulano</td>
          <td onClick="infoCel(2, 3)">01/10/2007</td>
        </tr>
      </tbody>
    </table>

</body>