concesionario2.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 2</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. #concesionario td:nth-child(4)::after {
  18. content: " €";
  19. color:goldenrod;
  20. }
  21. #concesionario tr:nth-child(8) td:nth-child(4) {
  22. color:goldenrod;
  23. }
  24. #filtros {
  25. display:flex;
  26. }
  27. </style>
  28.  
  29. let marcas, tipos;
  30.  
  31. function iniciar() {
  32. marcas = document.querySelectorAll('#concesionario td:nth-child(1)');
  33. tipos = document.querySelectorAll('#concesionario td:nth-child(3)');
  34. }
  35. function filtrarMarca(input) {
  36. limpiar();
  37. for (const td of marcas) {
  38. if (td.innerHTML == input.value) {
  39. td.parentElement.style.backgroundColor = 'yellow';
  40. }
  41. }
  42. }
  43. function filtrarTipo(input) {
  44. limpiar();
  45. for (const td of tipos) {
  46. if (td.innerHTML == input.value) {
  47. td.parentElement.style.backgroundColor = 'yellow';
  48. }
  49. }
  50. }
  51. function limpiar() {
  52. for (const td of marcas) {
  53. td.parentElement.style.backgroundColor = '';
  54. }
  55. }
  56.  
  57. </script>
  58. </head>
  59. <body onload="iniciar()">
  60. <h1>Concesionario 2</h1>
  61. <table id="concesionario">
  62. <tr>
  63. <th>Marca</th>
  64. <th>Modelo</th>
  65. <th>Tipo</th>
  66. <th>Precio</th>
  67. </tr>
  68. </thead>
  69. <tr>
  70. <td>Seat</td>
  71. <td>Ibiza</td>
  72. <td>diesel</td>
  73. <td>12000</td>
  74. </tr>
  75. <tr>
  76. <td>Renault</td>
  77. <td>Megane</td>
  78. <td>gasol</td>
  79. <td>15000</td>
  80. </tr>
  81. <tr>
  82. <td>Seat</td>
  83. <td>Altea</td>
  84. <td>gasol</td>
  85. <td>17000</td>
  86. </tr>
  87. <tr>
  88. <td>Peugeout</td>
  89. <td>3008</td>
  90. <td>diesel</td>
  91. <td>20000</td>
  92. </tr>
  93. <tr>
  94. <td>Renault</td>
  95. <td>Clio</td>
  96. <td>gasol</td>
  97. <td>13000</td>
  98. </tr>
  99. <tr>
  100. <td>Ford</td>
  101. <td>Fiesta</td>
  102. <td>gasol</td>
  103. <td>9000</td>
  104. </tr>
  105. <tr>
  106. <td>Toyota</td>
  107. <td>Prius</td>
  108. <td>hibrid</td>
  109. <td>21000</td>
  110. </tr>
  111. <tr>
  112. <td>Tesla</td>
  113. <td>Roaster</td>
  114. <td>electr</td>
  115. <td>172000</td>
  116. </tr>
  117. <tr>
  118. <td>Ford</td>
  119. <td>Mondeo</td>
  120. <td>diesel</td>
  121. <td>18000</td>
  122. </tr>
  123. </tbody>
  124. </table>
  125.  
  126. <h2>Filtros</h2>
  127. <div id="filtros">
  128. <legend>Marca</legend>
  129. <input type="radio" name="marca" value="Seat"
  130. onchange="filtrarMarca(this)">
  131. Seat
  132. </label>
  133. <input type="radio" name="marca" value="Renault"
  134. onchange="filtrarMarca(this)">
  135. Renault
  136. </label>
  137. <input type="radio" name="marca" value="Ford"
  138. onchange="filtrarMarca(this)">
  139. Ford
  140. </label>
  141. <input type="radio" name="marca" value="Toyota"
  142. onchange="filtrarMarca(this)">
  143. Toyota
  144. </label>
  145. <legend>Tipo</legend>
  146. <input type="radio" name="tipo" value="gasol" onchange="filtrarTipo(this)">
  147. Gasolina
  148. </label>
  149. <input type="radio" name="tipo" value="diesel"
  150. onchange="filtrarTipo(this)">
  151. Diesel
  152. </label>
  153. <input type="radio" name="tipo" value="hibrid"
  154. onchange="filtrarTipo(this)">
  155. Híbrido
  156. </label>
  157. <input type="radio" name="tipo" value="electr"
  158. onchange="filtrarTipo(this)">
  159. Eléctrico
  160. </label>
  161. </div>
  162. </body>
  163. </html>

Proinf.net