olá galera bom, estou pesquisando um objeto na minha tabela mais não consigo editar o objeto filtrado clicando na na minha img
OBS: Quando busco todos os elementos por padrão quando carrego a pagina, eu já consigo recuperar e após editar. Segue meu codigo.
RESUMINDO Após filtrar o objeto não consigo editar o mesmo
meu JS
$(function() {
var posicao_selecionada = -1;
var CRIA_CONTATO = "NOVO_CONTATO"
var tipoCadastro = CRIA_CONTATO;
function pegaTodosJson(){
return localStorage.getItem('contato');
}
function devolveContatos(){
var contatos = pegaTodosJson();
contatos = JSON.parse(contatos);
if(contatos == null){
return contatos =[];
}else{
return contatos;
}
}
function criaObjetoJson(){
var contato = JSON.stringify({
"codigo" : $("#campo-id").val(),
"nome" : $("#campo-nome").val(),
"email" : $("#campo-email").val(),
"endereco" : $("#campo-endereco").val(),
"telefone_fixo" : $("#campo-telefone-Fixo").val(),
"telefone_celular" : $("#campo-celular").val()
});
return contato;
}
function recuperaContato(){
}
function montaColuna(){
$("#tableContato").html("");
$("#tableContato").html(`
<thead>
<tr>
<th>Codigo</th>
<th>Nome</th>
<th>Email</th>
<th>Endereco</th>
<th>Telefone Fixo</th>
<th>Telefone Celular</th>
<th>Editar</th>
<th>Excluir</th>
</tr>
</thead>
<tbody>
</tbody>
`);
}
function salvaLocalStorage(contato){
var contatos = devolveContatos();
contatos.push(contato);
localStorage.setItem('contato', JSON.stringify(contatos));
return true;
}
function removeElemento(contatos,posicao_selecionada){
contatos.splice(posicao_selecionada,1);
localStorage.setItem('contato', JSON.stringify(contatos));
}
function adicionaContato(){
var contato = criaObjetoJson();
salvaLocalStorage(contato);
alert('Contato Adicionado com Sucesso!')
return true;
}
function atualizarContato(){
var contatos = devolveContatos();
contatos[posicao_selecionada] = JSON.stringify({
"codigo" : $("#campo-id").val(),
"nome" : $("#campo-nome").val(),
"email" : $("#campo-email").val(),
"endereco" : $("#campo-endereco").val(),
"telefone_fixo" : $("#campo-telefone-Fixo").val(),
"telefone_celular" : $("#campo-celular").val()
});
localStorage.setItem('contato', JSON.stringify(contatos));
alert('Contato Atualizado com Sucesso!');
return true;
}
function excluirContato(posicao_selecionada){
var contatos = devolveContatos();
removeElemento(contatos,posicao_selecionada);
alert('Contato Excluído com sucesso!');
}
function listarContatos(){
montaColuna();
var contatos = devolveContatos();
for (i in contatos) {
var contato = JSON.parse(contatos[i]);
$("#tableContato tbody").append(`
<tr>
<td> ${contato.codigo} </td>
<td> ${contato.nome} </td>
<td> ${contato.email} </td>
<td> ${contato.endereco} </td>
<td> ${contato.telefone_fixo} </td>
<td> ${contato.telefone_celular} </td>
<td> <img src='imagens/edit.png' data-contato-id="${i}" class='botao-editar' /> </td>
<td> <img src='imagens/delete.png' data-contato-id="${i}" class='botao-excluir' /> </td>
</tr>
`);
}
}
function pesquisaContato(nome){
var contatoPesquisado = null;
var contatos = devolveContatos();
for(i in contatos){
var contact = JSON.parse(contatos[i]);
if(contact.nome === nome){
contatoPesquisado = contact;
}
}
$("#tableContato tbody").empty();
$("#tableContato tbody").append(`
<tr>
<td> ${contatoPesquisado.codigo} </td>
<td> ${contatoPesquisado.nome} </td>
<td> ${contatoPesquisado.email} </td>
<td> ${contatoPesquisado.endereco} </td>
<td> ${contatoPesquisado.telefone_fixo} </td>
<td> ${contatoPesquisado.telefone_celular} </td>
<td> <img src='imagens/edit.png' data-contato-id="${contatoPesquisado.id}" class='botao-editar' /> </td>
<td> <img src='imagens/delete.png' data-contato-id="${contatoPesquisado.id}" class='botao-excluir' /> </td>
</tr>
`);
}
$('.formulario').bind("submit",function() {
if(tipoCadastro == CRIA_CONTATO){
return adicionaContato();
}
else{
return atualizarContato();
}
});
listarContatos();
$(".botao-editar").bind("click", function(){
CRIA_CONTATO = 'EDITAR_CONTATO';
posicao_selecionada = parseInt($(this).attr("data-contato-id"));
var contatos = devolveContatos();
var contato = JSON.parse(contatos[posicao_selecionada]);
$("#campo-id").val(contato.codigo);
$("#campo-nome").val(contato.nome);
$("#campo-email").val(contato.email);
$("#campo-endereco").val(contato.endereco);
$("#campo-telefone-Fixo").val(contato.telefone_fixo);
$("#campo-celular").val(contato.telefone_celular);
$("#campo-id").attr('readonly', 'readonly');
$("#campo-nome").focus();
});
$('.botao-excluir').bind("click",function() {
posicao_selecionada = parseInt($(this).attr("data-contato-id"));
excluirContato(posicao_selecionada);
listarContatos();
});
$('#botao-pesquisar').on('click', function() {
var pegaValorDaPesquisa = $('#campo-pesquisar').val();
if(pegaValorDaPesquisa.length == 0){
alert('não possui nenhum registro');
return listarContatos();
}
pesquisaContato(pegaValorDaPesquisa);
});
});
meu html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Agenda de Contatos</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<header>
<div class="container">
<h1>Agenda Contatos</h1>
</div>
</header>
<main class="container">
<section>
<h2>Formulário de Contatos</h2>
<form class="formulario">
<fieldset>
<label for="campo-id">Codigo</label>
<input id="campo-id" type="text" required="true">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-nome">Nome:</label>
<input id="campo-nome" type="text" placeholder="digite o seu Nome">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-email">Email:</label>
<input id="campo-email" type="text" placeholder="digite o seu Email">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-endereco">Endereco</label>
<input id="campo-endereco" type="text" placeholder="Informe o seu Endereço">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-telefone-Fixo">Telefone Fixo:</label>
<input id="campo-telefone-Fixo" type="text" placeholder="digite o seu telefone Fixo">
</fieldset>
<fieldset class="campo-TelefoneCelular">
<label for="campo-celular">Telefone Celular:</label>
<input id="campo-celular" type="text" placeholder="digite o telefone celular">
</fieldset>
<button id="adicionar-contato" type='submit' class="botao bto-principal">Adicionar</button>
</form>
<br>
<fieldset class="campo-pesquisar">
<label for="campo-pesquisar">Pesquisar por Nome:</label>
<input id="campo-pesquisar" type="text" placeholder="pesquisar...">
<button id="botao-pesquisar" type='submit' class="botao bto-principal">Pesquisar</button>
</fieldset>
</section>
<h2 id="tblContatos">Tabela de Contatos</h2>
<section>
<h2> </h2>
<table style="border: 1px;" id="tableContato">
</table>
</section>
</main>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/index.js"></script>
<script>
$('h1').animate({'margin-left': '+=410'}, 5000);
$('#tblContatos').animate({'margin-right': '+=410'}, 5050)
</script>
</body>
</html>
