Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcosbrasil

Armazenar Dados em JSON e pesquisar

Por , em Javascript

Recommended Posts

marcosbrasil    0

marcosbrasil
Postado

Ola a todos,

Estou com dificuldade.

Tenho dois input , o 1°input é o titulo o 2° input é a classificação e um Botao pesquisa

 

Tenho que ter os dados armazenados em JSON, ao clicar no botao pesquisar vai chamar uma funçao

em javascript e mostrar os dados em uma tabela em JSON.

 

Os dados armazenados em JSON poderia ser apenas uns dois,exemplo

Titulo:Javascript

Classificação:Programaçao web

 

Titulo:java

Classificaçao:Programação

 

Isso é que o usuário teria em mente para pesquisar.

 

Cheguei ate aqui.

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Exercicio 4</title>
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">

 

javascript



function pesquisarDados(){

}

</script>
</head>

 

HTML


<body>
<form method="get" action=""id="campo">
<h4>Biblioteca Marcola</h4>
<p>Pesquisa por Titulo</p>
<input type="text" name="Titulo" placeholder="Digite o Titulo">

<p>Pesquisa por Classificação</p>
<input type="text" name="Classificação" placeholder="Digite a Classificação">
<br/>
<br/>
<input type="button" onclick="pesquisarDados" value="Pesquisar">
</form>

 

TABELA

<table id="table" border=1></table>

</body>
</html>

Baixar Arquivo

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcosbrasil    0

marcosbrasil
Postado

Bom consegui fazer assim. porem nao esta pesquisando o que digito e nao aparece na tabela.

Depois que digitado no input e gravado,ao clicar no botao pesquisar,aparece no input.

Tem como pesquisar um dado que esta em Jason por meio de javascript +jquery?

 

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Exercicio 4</title>
<script src="jquery-1.8.2.min.js"></script>
<style type="text/css">
/*Folha Estilo*/
#titulo,#classificacao{
border:1px solid orange;
}
h4{
color:teal;
font-size:20px;
}


</style>
<script type="text/javascript">

/*Estrutura JSON*/
var cadastro = [
{"Titulo":"javascript"},
{"Classificacao":"Programacao web"},

]

/*Funcao gravar*/
$(function(){
$("#button1").click(gravarDados);
$("#button2").click(carregarDados);
$("#button3").click(function(){
apagarDados();
});
});

function gravarDados(){
localStorage.setItem("titulo",$("#titulo").val());
localStorage.setItem("classificacao",$("#classificacao").val());

alert("Dados gravados");
limparCampos();
}

/*Funcao carregar dados*/
function carregarDados(){
$("#titulo").val(localStorage.getItem("titulo"));
$("#classificacao").val(localStorage.getItem("classificacao"));


}

/*Funcao apagar dados*/
function apagarDados(){
localStorage.clear();

limparCampos();
}
/*Funcao limpar campos*/
function limparCampos(){
$("#titulo").val("");
$("#classificacao").val("");

}

/*Funcao tabela*/
$(function()
{
var html="";
dados = cadastro.length;
for(var i=0;i<dados;i++){
html += "<tr class= 'cadastro'> ";
html +=
" <td> "+cadastro.titulo+"</td>"+
" <td> "+cadastro.classificacao+"</td>"+





html += " </tr> ";
}

$("#tabela").append(html);

});


</script>
</head>
<body>
<form method="get" action=""id="campo">
<h4>Biblioteca Marcola</h4>
<h4>Livros Cadastrados:
<h4>Titulo:Javascript</h4>
<h4>Classificação:Programação Web</h4>
</h4>
<p>Pesquisa por Titulo</p>
<input id="titulo"type="text" name="Titulo" placeholder="Digite o Titulo">
<p>Pesquisa por Classificação</p>
<input id="classificacao"type="text" name="Classificação" placeholder="Digite a Classificação">
<br/>
<br/>
<p>
<input type="button" name="button1" id="button1" value="Gravar" />
<input type="button" name="button2" id="button2" value="pesquisar "/>
<input type="button" name="button3" id="button3" value="Apagar" />
</p>
</form>

<h4> Tabela de Registros </h4>
<table border style="text-align:center" style="text-align:center">
<tr id="tabela" >
<td>Titulo</td>
<td>Classificacao</td>

</tr>

</table>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito