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.
<!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>