concesionario1.html 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Concesionario 1</title>
  8.     <style>
  9.         #concesionario {
  10.             border-collapse: collapse;
  11.         }
  12.         #concesionario td {
  13.             border:1px solid black;
  14.             padding: 0.5em 1em;
  15.         }
  16.         #concesionario td:nth-child(4) {
  17.             text-align:right;
  18.         }
  19.         #filtros {
  20.             display:flex;
  21.         }
  22.     </style>
  23.     <script>
  24.  
  25.         let marcas, tipos; 
  26.  
  27.         function iniciar() {
  28.             marcas = document.querySelectorAll('#concesionario td:nth-child(1)');
  29.             tipos = document.querySelectorAll('#concesionario td:nth-child(3)');
  30.         }
  31.         function filtrarMarca(marca) {
  32.             limpiar();
  33.             for (const td of marcas) {
  34.                 if (td.innerHTML == marca) {
  35.                     td.parentElement.style.backgroundColor = 'yellow';
  36.                 }
  37.             }
  38.         }
  39.         function filtrarTipo(tipo) {
  40.             limpiar();
  41.             for (const td of tipos) {
  42.                 if (td.innerHTML == tipo) {
  43.                     td.parentElement.style.backgroundColor = 'yellow';
  44.                 }
  45.             }
  46.         }
  47.         function limpiar() {
  48.             for (const td of marcas) {
  49.                 td.parentElement.style.backgroundColor = '';
  50.             }
  51.         }
  52.  
  53.     </script>
  54. </head>
  55. <body onload="iniciar()">
  56.     <h1>Concesionario 1</h1>
  57.     <table id="concesionario">
  58.         <thead>
  59.         <tr>
  60.         <th>Marca</th>
  61.         <th>Modelo</th>
  62.         <th>Tipo</th>
  63.         <th>Precio</th>
  64.         </tr>
  65.         </thead>
  66.         <tbody>
  67.         <tr>
  68.         <td>Seat</td>
  69.         <td>Ibiza</td>
  70.         <td>diesel</td>
  71.         <td>12000 </td>
  72.         </tr>
  73.         <tr>
  74.         <td>Renault</td>
  75.         <td>Megane</td>
  76.         <td>gasol</td>
  77.         <td>15000</td>
  78.         </tr>
  79.         <tr>
  80.         <td>Seat</td>
  81.         <td>Altea</td>
  82.         <td>gasol</td>
  83.         <td>17000</td>
  84.         </tr>
  85.         <tr>
  86.         <td>Peugeout</td>
  87.         <td>3008</td>
  88.         <td>diesel</td>
  89.         <td>20000</td>
  90.         </tr>
  91.         <tr>
  92.         <td>Renault</td>
  93.         <td>Clio</td>
  94.         <td>gasol</td>
  95.         <td>13000</td>
  96.         </tr>
  97.         <tr>
  98.         <td>Ford</td>
  99.         <td>Fiesta</td>
  100.         <td>gasol</td>
  101.         <td>9000</td>
  102.         </tr>
  103.         <tr>
  104.         <td>Toyota</td>
  105.         <td>Prius</td>
  106.         <td>hibrid</td>
  107.         <td>21000</td>
  108.         </tr>
  109.         <tr>
  110.         <td>Tesla</td>
  111.         <td>Roaster</td>
  112.         <td>electr</td>
  113.         <td>172000</td>
  114.         </tr>
  115.         <tr>
  116.         <td>Ford</td>
  117.         <td>Mondeo</td>
  118.         <td>diesel</td>
  119.         <td>18000</td>
  120.         </tr>
  121.         </tbody>
  122.         </table>
  123.  
  124.     <h2>Filtros</h2>
  125.     <div id="filtros">
  126.         <fieldset>
  127.             <legend>Marca</legend>
  128.             <button onclick="filtrarMarca('Seat')">Seat</button>
  129.             <button onclick="filtrarMarca('Ford')">Ford</button>
  130.         </fieldset>
  131.         <fieldset>
  132.             <legend>Tipo</legend>
  133.             <button onclick="filtrarTipo('diesel')">Diesel</button>
  134.             <button onclick="filtrarTipo('gasol')">Gasolina</button>
  135.         </fieldset>
  136.     </div>
  137. </body>
  138. </html>

Proinf.net