bucle03.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>Inmobiliaria</title>
  5. #inmuebles {
  6. border-collapse: collapse;
  7. }
  8. #inmuebles td {
  9. border:1px solid gray;
  10. padding:0.5em 1em;
  11. }
  12. #inmuebles td:nth-child(2),
  13. #inmuebles td:nth-child(4) {
  14. text-align: right;
  15. }
  16. #inmuebles td:nth-child(2)::after {
  17. content: " m²";
  18. color: gray;
  19. }
  20. #inmuebles td:nth-child(4)::after {
  21. content: " €";
  22. color: gray;
  23. }
  24.  
  25. </style>
  26. let locales, precios;
  27.  
  28. function iniciar() {
  29. locales = document.querySelectorAll('#inmuebles td:nth-child(3)');
  30. precios = document.querySelectorAll('#inmuebles td:nth-child(4)');
  31. }
  32. function marcarLocal() {
  33. for (const local of locales) {
  34. if (local.innerHTML == 'local') {
  35. local.parentElement.style.backgroundColor = 'yellow';
  36. }
  37. }
  38. }
  39. function marcarCaro() {
  40. for (const precio of precios) {
  41. if (precio.innerHTML >= 1000) {
  42. precio.style.color = 'red';
  43. }
  44. }
  45. }
  46. </script>
  47. </head>
  48. <body onload="iniciar()">
  49. <h1>Inmobiliaria</h1>
  50.  
  51. <table id="inmuebles">
  52. <tr>
  53. <th>Zona</th>
  54. <th>Superficie</th>
  55. <th>Tipo</th>
  56. <th>Precio</th>
  57. </tr>
  58. </thead>
  59. <tr>
  60. <td>Norte</td>
  61. <td>30</td>
  62. <td>ático</td>
  63. <td>400</td>
  64. </tr>
  65. <tr>
  66. <td>Sur</td>
  67. <td>60</td>
  68. <td>local</td>
  69. <td>700</td>
  70. </tr>
  71. <tr>
  72. <td>Este</td>
  73. <td>20</td>
  74. <td>habit</td>
  75. <td>300</td>
  76. </tr>
  77. <tr>
  78. <td>Oeste</td>
  79. <td>90</td>
  80. <td>casa</td>
  81. <td>1200</td>
  82. </tr>
  83. <tr>
  84. <td>Centro</td>
  85. <td>120</td>
  86. <td>local</td>
  87. <td>2000</td>
  88. </tr>
  89. </tbody>
  90. </table>
  91. <p id="botones">
  92. <button onclick="marcarLocal()">Marcar locales</button>
  93. <button onclick="marcarCaro()">Marcar caro</button>
  94. </p>
  95. </body>
  96. </html>

Proinf.net