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.
Ajax
? Já tem uma chamada que retorna os dados? No seu código já tem uma chamadaAjax
, não seria nada muito diferente disso. Aqui tem um exemplo bem simples que pode te ajudar: devmedia.com.br/…