0

Estou trabalhando com a API de consulta da tabela FIPE e, gostaria de fazer com que, ao clicar em qualquer um dos itens desta tabela, a tabela atual oculte-se, para então, uma nova tabela com as informações específicas do item clicado apareça, porém não faço ideia de como solucionar este problema. inserir a descrição da imagem aqui

<!DOCTYPE html>
Lista Carros - FIPE #loading { background-color: #dddddd; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; } #loading>div { position: relative; top: 50%; left: calc(50% - 50px); }
<div id="loading">
    <div>
        <div class="spinner-border text-primary"></div> Carregando...
    </div>
</div>

<div class="container" style="padding-top: 20px;">
    <h1>Lista Carros - FIPE</h1>
    <label>Selecione a Marca:</label>
    <select class="form-control" id="selMarcas" onchange="getCarros()">
<!-- aqui vao ser inseridas as opções -->
Nome do automóvel
            </tbody>
        </table>
    </div>
</div>

<script>
    //associa um objeto JS a um elemento HTML usando Jquery
    var selMarcas = $("#selMarcas");
    var corpoTabela = $("#corpoTabela");
    var loading = $("#loading");

    loading.hide();

    function getMarcas() {
        var url = "http://fipeapi.appspot.com/api/1/carros/marcas.json";
        loading.show();
        $.get(url, null, function(r) {
            for (var i = 0; i < r.length; i++) {
                selMarcas.append('<option value="' + r[i].id + '">' + r[i].name + '</option>');
            }
            loading.hide();
        });
    }

    function getCarros() {
        var idMarca = selMarcas.val();
        var url = "http://fipeapi.appspot.com/api/1/carros/veiculos/" + idMarca + ".json";
        loading.show();
        $.get(url, null, function(r) {
            //console.clear();
            //console.log(r);
            corpoTabela.html('');
            for (var i = 0; i < r.length; i++) {
                corpoTabela.append('<tr><td>' + r[i].name + '</td></tr>');
            }
            loading.hide();
        });
    }

    getMarcas();
</script>
1
  • Oi João Rosa, tudo bem? Então vou comentar aqui pelo que entendi você quer clicar no resultado da consulta de sua API, sugiro você dar um inspect ou vê na documentação qual o id ou class da tabela da api e com javascript fazer um innerhtml para juntar ao seu site e assim torna clicavel.Uma sugestão, melhora a sua pergunta não ta muito claro. 9/03/2021 às 19:55

1 Resposta 1

0

    //associa um objeto JS a um elemento HTML usando Jquery
    var selMarcas = $("#selMarcas");
    var corpoTabela = $("#corpoTabela");
    var loading = $("#loading");

    loading.hide();

    function getMarcas() {
        var url = "http://fipeapi.appspot.com/api/1/carros/marcas.json";
        loading.show();
        $.get(url, null, function(r) {
            for (var i = 0; i < r.length; i++) {
                selMarcas.append('<option value="' + r[i].id + '">' + r[i].name + '</option>');
            }
            loading.hide();
        });
    }

    function getCarros() {
        var idMarca = selMarcas.val();
        var url = "http://fipeapi.appspot.com/api/1/carros/veiculos/" + idMarca + ".json";
        loading.show();
        $.get(url, null, function(r) {
            //console.clear();
            //console.log(r);
            corpoTabela.html('');
            for (var i = 0; i < r.length; i++) {
                corpoTabela.append('<tr><td style="cursor:pointer" onclick="getDetalhes(' + r[i].id + ')">' + r[i].name + '</td></tr>');
            }
            loading.hide();
        });
    }
    
    function getDetalhes(id){
        bootbox.dialog({
        message: "Aqui você vai exibir o resultado de uma pesquisa detalhada usando o ID, por exemplo, vindo da chamada.",
        buttons: {          
            ok: {
                label: "OK",
                className: 'btn-info',
                callback: function(){
                    Example.show('Se precisar fazer alguma coisa depois que terminar...');
                }
            }
        }
        });
    }

    getMarcas();
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
    </head>
    <body>
        <div id="loading">
            <div>
                <div class="spinner-border text-primary"></div> Carregando...
            </div>
        </div>

        <div class="container" style="padding-top: 20px;">
            <h1>Lista Carros - FIPE</h1>
            <label>Selecione a Marca:</label>
            <select class="form-control" id="selMarcas" onchange="getCarros()"> </select>

            <table class="table">   
                <thead>
                    <tr><th>Nome do automóvel</th></tr>
                </thead>
                <tbody id="corpoTabela">
                </tbody>
            </table>
        </div>
    </body>
</html>

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 .