Filtro funcional

Cruz-Andre · Mar 20, 2024 · 6a00137 · 6a00137
1 parent f3ac4bf
commit 6a00137
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -60,7 +60,7 @@ <h2>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h2>
 
           <tr class="hospital" id="2">
             <td class="infoNome">Mãe de Deus</td>
-            <td class="infoApos">1234</td>
+            <td class="infoApos">4321</td>
             <td class="infoAneg">5678</td>
             <td class="infoBpos">9012</td>
             <td class="infoBneg">1005</td>
@@ -72,7 +72,7 @@ <h2>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h2>
 
           <tr class="hospital" id="3">
             <td class="infoNome">Pronto Socorro</td>
-            <td class="infoApos">1234</td>
+            <td class="infoApos">3412</td>
             <td class="infoAneg">5678</td>
             <td class="infoBpos">9012</td>
             <td class="infoBneg">1005</td>
@@ -93,6 +93,7 @@ <h2>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h2>
   </footer>
 
   <script type="module" src="./js/ano.js"></script>
+  <script type="module" src="./js/filtraHospital.js"></script>
 
 </body>
 

diff --git a/js/filtraHospital.js b/js/filtraHospital.js
@@ -0,0 +1,18 @@
+document.addEventListener("DOMContentLoaded", function() {
+    let inputFiltro = document.getElementById("filtrarTabela");
+
+    inputFiltro.addEventListener("input", function() {
+        let filtro = inputFiltro.value.toLowerCase();
+        let hospitais = document.querySelectorAll(".hospital");
+
+        hospitais.forEach(function(hospital) {
+            let nomeHospital = hospital.querySelector(".infoNome").textContent.toLowerCase();
+
+            if (nomeHospital.includes(filtro)) {
+                hospital.style.display = "table-row";
+            } else {
+                hospital.style.display = "none";
+            }
+        });
+    });
+});
diff --git a/pages/manutencaoHospitais.html b/pages/manutencaoHospitais.html
@@ -67,7 +67,7 @@ <h2>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h2>
           <tr class="hospital" id="seleciona">
             <td class="infoCodigo">2</td>
             <td class="infoNome">Mãe de Deus</td>
-            <td class="infoApos">1234</td>
+            <td class="infoApos">4321</td>
             <td class="infoAneg">5678</td>
             <td class="infoBpos">9012</td>
             <td class="infoBneg">1005</td>
@@ -80,7 +80,7 @@ <h2>Quantidade de Bolsas de Sangue por Tipo Sanguíneo</h2>
           <tr class="hospital" id="seleciona">
             <td class="infoCodigo">3</td>
             <td class="infoNome">Pronto Socorro</td>
-            <td class="infoApos">1234</td>
+            <td class="infoApos">3412</td>
             <td class="infoAneg">5678</td>
             <td class="infoBpos">9012</td>
             <td class="infoBneg">1005</td>
@@ -155,6 +155,7 @@ <h2 id="tituloForm">Manutenção dos Hospitais</h2>
 
   <script type="module" src="../js/ano.js"></script>
   <script type="module" src="../js/manutencaoHosp.js"></script>
+  <script type="module" src="../js/filtraHospital.js"></script>
 </body>
 
 </html>