Skip to main content
1 de 2
WMomesso
  • 2,5mil
  • 3
  • 19
  • 48

Inserir um select dentro de uma td ao dar duplo click é possivel?

Olá eu tenho uma tabela dinamica que funciona muito bem, mas como o campo é um input as pessoas podem digitar qualquer coisa, mas queria limitar esta edição usando as opções dos option, segue a forma que se encontra hoje.

$(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>

perceba que ao dar duplo click na coluna tipo a mesma insere um input para inserir qualquer outro tipo, o que eu queria seria limitar edição, eu consigo inserir o select mas não estou conseguindo popular os options, sei que terá q ser algo em ajax e está é a minha grande dificuldade.

WMomesso
  • 2,5mil
  • 3
  • 19
  • 48