Fiz o filtro, mais queria saber como adiciono um contador contador dinâmico de linha . Junto do filtro.
Alguém saberia me ajudar ?
Fiz o filtro, mais queria saber como adiciono um contador contador dinâmico de linha . Junto do filtro.
Alguém saberia me ajudar ?
Salve, Antonio.
Você pode criar um span
para guardar esse valor, como por exemplo:
<h2>Meus pacientes <span id="total"></span></h2>
E ajustar o filtra.js
:
var campoFiltro = document.querySelector("#filtrar-tabela");
// aqui é o elemento que vai exibir a quantidade de pacientes encontrados
var spanTotalFiltrado = document.querySelector('#total')
campoFiltro.addEventListener("input", function() {
var pacientes = document.querySelectorAll(".paciente");
if (this.value.length > 0) {
for (var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
var tdNome = paciente.querySelector(".info-nome");
var nome = tdNome.textContent;
var expressao = new RegExp(this.value, "i");
if (!expressao.test(nome)) {
paciente.classList.add("invisivel");
} else {
paciente.classList.remove("invisivel");
}
}
} else {
for (var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
paciente.classList.remove("invisivel");
}
}
// aqui você vai pegar todas as TRs dentro do TBODY que não possuem a classe .invisivel
const pacientesVisiveis = document.querySelectorAll('tbody tr:not(.invisivel)')
spanTotalFiltrado.textContent = pacientesVisiveis.length
});