<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> #concesionario {
border-collapse: collapse;
}
#concesionario td {
border:1px solid black;
padding: 0.5em 1em;
}
#concesionario td:nth-child(4) {
text-align:right;
}
#filtros {
display:flex;
}
let marcas, tipos;
function iniciar() {
marcas = document.querySelectorAll('#concesionario td:nth-child(1)');
tipos = document.querySelectorAll('#concesionario td:nth-child(3)');
}
function filtrarMarca(marca) {
limpiar();
for (const td of marcas) {
if (td.innerHTML == marca) {
td.parentElement.style.backgroundColor = 'yellow';
}
}
}
function filtrarTipo(tipo) {
limpiar();
for (const td of tipos) {
if (td.innerHTML == tipo) {
td.parentElement.style.backgroundColor = 'yellow';
}
}
}
function limpiar() {
for (const td of marcas) {
td.parentElement.style.backgroundColor = '';
}
}
<body onload="iniciar()"> <table id="concesionario">