4

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, a tabela eu uso o id="tblEditabel" e nas linhas que irão funcionar com duplo click coloquei a classe class="editavel", desta forma apenas os campos com a classe serão editados, estou usando comandos mysql para consulta ao banco. 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.

3
  • Você consegue carregar um objeto com essas informações?
    – novic
    Commented 18/02/2017 às 13:28
  • Mas qual exatamente é sua dificuldade ao incluir os options com dados de uma chamada Ajax? Já tem uma chamada que retorna os dados? No seu código já tem uma chamada Ajax, não seria nada muito diferente disso. Aqui tem um exemplo bem simples que pode te ajudar: devmedia.com.br/… Commented 18/02/2017 às 13:39
  • 1
    Bom dia @VirgilioNovic da forma que se encontra eu trabalho normalmente, as informações inseridas no input são salvas no banco sem maiores complicaçoes.
    – WMomesso
    Commented 18/02/2017 às 13:40

2 Respostas 2

4

Além do objeto a ser carregado, tem a codificação do select e o valor selecionado para ficar como o último valor escolhido. Foi colocado um var items com 3 itens fixos o que pode ser feito é trazer as informações formatadas para que o select seja carregado.

Pode ser carregado via sem problemas, é só adicionar nesse código isso, mas, você poderia editar a sua pergunta e colocar o nome da tabela, dos campos e se está usando PDO ou Mysqli para proposta essa solução.

Exemplo:

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>

1
  • 1
    Obrigado @VirgilioNovic era exatamente a minha dúvida de onde colocar os dados dos options.
    – WMomesso
    Commented 18/02/2017 às 14:11
0

Me ajudou muito o exemplo do combo, mas ele está com um problema, se você clicar no último combo e selecionar um item e depois no de cima e selecionar algo, o combo debaixo concatena a escolha do combo debaixo com o selecionado no combo de cima. Outra coisa, precisa clicar duas vezes. Fiz algumas alterações e acho que ficou bom! Agora é só clicar uma vez e não duplica os itens selecionados. Espero que gostem.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .