Filtrar tabela com CheckBox

[afonsorenan2 0]

Olá pessoal... estou tentando criar uma tabela com filtros e estou utilizando o seguinte sistema que está quase lá

http://jsfiddle.net/abhiklpm/ZEDR9/5/

 

Quando eu seleciono Shipping  e 2GB  era pra me retornar apenas a linha 3, assim:

Memory3     Shipping     2GB     1333MHz

 

Mas ta retornando todos os "Shipping "

Memory1     Shipping     1GB     1333MHz
Memory3     Shipping     2GB     1333MHz
Memory5     Shipping     4GB     1333MHz

 

segue o codigo, agradeço quem puder ajudar

 

<input class="prod_status " rel="status" type="checkbox" value="Discontinued">Discontinued
<br/>
<input class="prod_status" rel="status" type="checkbox" value="Shipping">Shipping
<br/>
<input class="prod_capacity" rel="capacity" type="checkbox" value="1GB">1GB
<br/>
<input class="prod_capacity" rel="capacity" type="checkbox" value="2GB">2GB
<br/>
<input class="prod_capacity" rel="capacity" type="checkbox" value="4GB">4GB
<br/>
<input class="prod_speed" rel="speed" type="checkbox" value="1000MHz">1000MHz
<br/>
<input class="prod_speed" rel="speed" type="checkbox" value="1333MHz">1333MHz
<br/>
<br />
<br />
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla">
    <caption>bla bla</caption>
    <thead>
        <tr id="ProductID" class="first">
            <th>Product Number</th>
            <th>Status</th>
            <th>Capacity</th>
            <th>Speed</th>
        </tr>
    </thead>
    <tbody>
        <tr id="Memory1" class="part_detail">
            <td class="name">Memory1</td>
            <td class="status" rel="Shipping">Shipping</td>
            <td class="capacity" rel="1GB">1GB</td>
            <td class="speed" rel="1333MHz">1333MHz</td>
        </tr>
        <tr id="Memory2" class="part_detail">
            <td class="name">Memory2</td>
            <td class="status" rel="Discontinued">Discontinued</td>
            <td class="capacity" rel="Shipping">2GB</td>
            <td class="speed" rel="1000MHz">1000MHz</td>
        </tr>
        <tr id="Memory3" class="part_detail">
            <td class="name">Memory3</td>
            <td class="status" rel="Shipping">Shipping</td>
            <td class="capacity" rel="2GB">2GB</td>
            <td class="speed" rel="1333MHz">1333MHz</td>
        </tr>
        <tr id="Memory4" class="part_detail">
            <td class="name">Memory4</td>
            <td class="status" rel="Discontinued">Discontinued</td>
            <td class="capacity" rel="4GB">4GB</td>
            <td class="speed" rel="1000MHz">1000MHz</td>
        </tr>
        <tr id="Memory5" class="part_detail">
            <td class="name">Memory5</td>
            <td class="status" rel="Shipping">Shipping</td>
            <td class="capacity" rel="4GB">4GB</td>
            <td class="speed" rel="1333MHz">1333MHz</td>
        </tr>
    </tbody>
  
  
  $("input:checkbox").click(function () {
    var showAll = true;
    $('tr').not(':first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var status = $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + status + '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});

[Eziquiel 96]

Veja se é isso que você quer:

 

http://codepen.io/Eziquiel/pen/NpdjqO?editors=0010

[afonsorenan2 0]

Exatamente mas como faço se as informações da tabela vem de um banco de dados mysql?

[Eziquiel 96]

Essa tabela utilizada foi só um exemplo ou você vai trabalhar exatamente com essa tabela e estes 4 campos (Product Nuber, Status, Capacity e Speed)?

[Eziquiel 96]

Eu mudei a lógica, considerando usar esta mesma tabela, porém recebendo outros valores de um banco de dados.

 

Agora peque todos os dados do MySQL e monte sua tabela completa. Estes filtros irão funcionar sem problema algum. Você pode também adicionar outros checkbox com novos valores para filtros, desde que recebam uma destas classes: "prod_status", ".prod_capacity" ou ".prod_speed". 

Tudo isso sem ter de alterar a função.

 

http://codepen.io/Eziquiel/pen/EWZXep?editors=0010

[afonsorenan2 0]

Deu Certo Obrigado

[Eziquiel 96]

52 minutos atrás, afonsoreanan disse:

Deu Certo Obrigado

De nada!