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

Proinf.net