JQuery Pesquisa na Tabela (Jquery + Json)

Bea_99 · 29 de outubro de 2017

Citação

EX - Crie um arquivo no formato JSON dentro de uma variável para representar a base de dados de livros de uma Biblioteca que contenha os seguintes campos: título, autor, edição, ano de publicação, editora, local de publicação, classificação, código, assunto. • Crie o arquivo com pelo menos 5 registros.

Em seguida faça o código JavaScript necessário para a definição abaixo:

Crie um arquivo HTML com um formulário com os campos: Título e Classificação e um botão "Pesquisar" que chame uma função para pesquisar os registros com base no que for informado em um dos campos.

Apresente o resultado em forma de tabela HTML (utilize jQuery + JSON).

Minha dúvida é: como posso colocar para pesquisar o título e/ou classificação? No caso, como realizar essa função exibeDados? (Segue meu código abaixo)

<html>

<head>
    <meta charset="utf-8" />
    <script src="js/jquery.min.js"></script>
    <script src="biblioteca.js"></script>
    <script>
        $(function() {

            $("#btn").click(exibeDados);
            $("#btn2").click(function() {
                apagaTudo();
            });
            
            armazenaDados();

        });

        function armazenaDados() {
            x = biblioteca.length;
            for (i = 0; i < x; i++) {
                $("#relatorio").append("<tr><td>" + biblioteca[i].livro.titulo + "</td><td class='classe1'>" +
                    biblioteca[i].livro.cod +
                    "</td><td class='classe1'>" + biblioteca[i].livro.autor +
                    "</td><td class='classe1'>" + biblioteca[i].livro.edicao +
                    "</td><td>" + biblioteca[i].livro.ano_publi +
                    "</td><td class='classe1'>" + biblioteca[i].livro.local_publi +
                    "</td><td class='classe1'>" +
                    biblioteca[i].livro.editora +
                    "</td><td class='classe1'>" +
                    biblioteca[i].livro.classificacao +
                    "</td><td class='classe2'>" + biblioteca[i].livro.assunto +
                    "</td></tr>");;
            }
        }     

        function apagaTudo() {
            $("#relatorio").html("");
        }

    </script>
</head>

<body>

    <h2 class="titulo">BIBLIOTECA</h2>
    <div class="container">
        <form action="" name="registration">
            Título: <input type="text" name="titulo" class="input-search" id="id_titulo" placeholder="Digite o Título do livro" autofocus><br><br> Assunto: <input type="text" name="classificacao" id="id_classificacao" placeholder="Gênero do Livro"><br><br>Classificação: <input type="text" name="classificacao" id="id_classificacao" placeholder="Classificação indicativa">
            <br><br>
            <input type="button" value="Pesquisar" id="btn">
            <input type="button" value="Apagar" id="btn2">
        </form>
    </div>

    <table border='1' id="relatorio">
        <th>TÍTULO</th>
        <th>CÓDIGO</th>
        <th>AUTOR</th>
        <th>EDIÇÃO</th>
        <th>ANO DE PUBLICAÇÃO</th>
        <th>LOCAL DE PUBLICAÇÃO</th>
        <th>EDITORA</th>
        <th>CLASSIFICAÇÃO</th>
        <th>ASSUNTO</th>
    </table>
</body>

</html>