1
resposta

Filtro e contar as linhas

Fiz o filtro, mais queria saber como adiciono um contador contador dinâmico de linha . Junto do filtro.

Alguém saberia me ajudar ?

1 resposta

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
});