1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

consulta em colunas de uma tabela html

Boa tarde amigos, tenho o seguinte código: no código abaixo ele tem 3 inputs 1 pra cada coluna na tabela, oq vc digitar no input será pesquisado em todas as linhas da coluna correspondente, tudo que eu preciso é usar apenas 1 input e fazer com que ele pesquise dados em 2 colunas por exemplo, ou seja 1 input irá pesquisar em DESCRIÇÃO e GRUPO, eu não consigo isso de jeito nenhum, só consigo resultado se o dado estiver exatamente nas duas colunas e na mesma linha, mas preciso do retorno do dado se tiver nas colunas, alguém poderia me ajudar?

<!-- HTML -->

        <div id="divConteudo">
            <table id="tabela">
                <thead>
                    <tr>
                        <th>Código</th>
                        <th>Descrição</th>
                        <th>Grupo</th>
                    </tr>
                    <tr>
                        <th><input type="text"/></th>
                        <th><input type="text"/></th>
                        <th><input type="text"/></th>
                    </tr>                
                </thead>
                <tbody>                                        
                    <tr>
                        <td>003.12-D</td>
                        <td>Iogurte de morango</td>
                        <td>Laticínios</td>
                    </tr>
                    <tr>
                        <td>041.27-E</td>
                        <td>Sabão em pó</td>
                        <td>Limpeza</td>
                    </tr>                
                </tbody>
            </table>

<!-- JAVA SCRIPT -->

$(function(){
    $("#tabela input").keyup(function(){        

        var index = $(this).parent().index();
        var nth = "#tabela td:nth-child("+(index+1).toString()+")";
        var valor = $(this).val().toUpperCase();
                console.log(nth,valor);
                //index = numero correspondente a coluna, neste caso = 0
                //valor = valor digitado alterado pra letra maiuscula
        $("#tabela tbody tr").show();
        $(nth).each(function(){
            if($(this).text().toUpperCase().indexOf(valor) < 0){
                $(this).parent().hide();
            }
        });
    });

    $("#tabela input").blur(function(){
        $(this).val("");
    });    
});
  • Não sei se você tem alguma restrição na utilização de frameworks prontos, caso não, aconselho o uso do Datatables. Muito simples e robusto. Faz o que você quer e muito mais.

    Cruz   12 de ago de 2017
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags php javascript jquery ou faça a sua própria pergunta.