Event with Table Click

Asked

Viewed 36 times

0

I am working with the FIPE table query API and, I would like to make sure that by clicking on any of the items in this table, the current table hides, and then a new table with the specific information of the clicked item appears, but I have no idea how to solve this problem. inserir a descrição da imagem aqui

<!DOCTYPE html>
List Cars - 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 -->
Car name 
            </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>
html jquery api

  • Hi João Rosa, how are you? So I’ll comment here as I understand it you want to click on the result of your API query, I suggest you give an introduction or see in the documentation which id or table class of the api and with javascript do an innerhtml to join to your site and so makes clickable.A suggestion, improves your question is not very clear.

1 answer

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>

Browser other questions tagged html jquery api

You are not signed in. Login or sign up in order to post.