Is it possible to insert a select into a td when double-clicking?

Question

Hello I have a dynamic table that works very well, but as the field is an input people can type anything, but wanted to limit this edition using the options of the options, the table I use the id="tblEditabel" and on the lines that will work with double click I put the class class="editavel", so only fields with class will be edited, I am using commands mysql for consultation with the bank. It follows the form it is today.

$(document).ready(function() {
  $('#tblEditavel tbody tr td.editavel').dblclick(function() {
      if ($('td > input').length > 0) {
        return;
      }
      var conteudoOriginal = $(this).text();
      var novoElemento = $('<input/>', {
        type: 'text',
        value: conteudoOriginal
      });
      $(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();
    
        //} removed the extra } from here.
    });
 })

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="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>
 </tbody>
</table>

notice that when double clicking on the column type the same inserts an input to insert any other type, what I wanted would be to limit editing, I can insert the select but I’m not getting popular the options, I know it will have to be something in ajax and this is my great difficulty.

Answer 1

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

Can be charged via ajax no problem, just add this code, but, you could edit your question and put the table name, fields and if 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>
<table id="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>

Answer 2

It helped me a lot the example of combo, but it is with 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 choice of the combo below with the selected one in the top combo. Another thing, you need to click twice. I made some changes and I think it looks 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 - link cdn -->
    <link rel="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>
    <table id="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>