filtrar mais de um campo

Olá André.

Você poderia fazer outros filtros para cada coisa ou pode colocar tudo em uma unica barra de pesquisa, exatamente como foi ensinado para procurar os nomes.

Olás, André.

Tudo bom? Você chegou a começar algum código? Se sim, manda aí para gente evoluir ele junto :-)

Olá seria esse referente ao curso pensei em colocar tudo em um array bem o querySelectorAll já é um array...

estou fazendo um site de trilhas entao teria uma tabela de eventos mas a pessoa quer procurar por outras informações e acho que isso seria importante para outros sites... e até para outras pessoas aqui do curso ...

var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function() {
    var eventos = document.querySelectorAll(".evento");

    if (this.value.length > 0) {
        for (var i = 0; i < eventos.length; i++) {
            var evento = eventos[i];

            var tdNome = evento.querySelector(".info-nome");
            var tdTipo = evento.querySelector(".info-tipo");

            var nome = tdNome.textContent;
            var tipo = tdTipo.textContent;

            var expressao = new RegExp(this.value,"i");            

            if (!expressao.test(nome)) {
                evento.classList.add("invisivel");
            } else {
                evento.classList.remove("invisivel");
            }
        }
    } else {
        for (var i = 0; i < eventos.length; i++) {
            var evento = eventos[i];
            evento.classList.remove("invisivel");
        }
    }
});

Boa tarde alguém poderia me ajudar nisso...

Se você quer colocar tudo em um array só, você pode usar o ForEach e criar as funções lá ou inicia-lás lá dentro.

Boa noite

não consegui ainda fazer um filtro para mais de um campo na tabela html...

André, tem vários jeitos de se fazer isto.

Um dos jeitos mais simples para aproveitar muita coisa do seu código antigo é extrair além dos dados do nome , também os dados de peso, mantendo o exemplo do curso.

            // Obtive os dados do peso também do paciente
            var tdPeso = paciente.querySelector(".info-peso");
            var peso = tdPeso.textContent;

Em seguida, você utilizar as expressões regulares para comparar não só o nome, mas também o peso.

Então se o paciente tiver um determinado nome OU um determinado peso, você remove a classe invisível dele:

            // Agora vou testar , se ele tem um nome OU se ele tem um peso
            if (expressao.test(nome) || expressao.test(peso)) {
                paciente.classList.remove("invisivel");
            } else {
                paciente.classList.add("invisivel");
            }

Vou colocar abaixo o exemplo do nosso curso, da tabela de pacientes sendo filtrada por nome e peso. Segue o código completo com as simples modificações acima:

var campoFiltro = document.querySelector("#filtrar-tabela");

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 expressao = new RegExp(this.value, "i");

            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;

            // Obtive os dados do peso também do paciente
            var tdPeso = paciente.querySelector(".info-peso");
            var peso = tdPeso.textContent;

            // Agora vou testar , se ele tem um nome OU se ele tem um peso
            if (expressao.test(nome) || expressao.test(peso)) {
                paciente.classList.remove("invisivel");
            } else {
                paciente.classList.add("invisivel");
            }
        }
    } else {
        for (var i = 0; i < pacientes.length; i++) {
            var paciente = pacientes[i];
            paciente.classList.remove("invisivel");
        }
    }
});

Bom dia

Obrigado funcionou... as vezes a solução é tão simples que nem percebemos...

Valeu mesmo...