concesionario1.html

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

Proinf.net