Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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();
}
});Exatamente mas como faço se as informações da tabela vem de um banco de dados mysql?
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)?
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.
Deu Certo Obrigado
>
52 minutos atrás, afonsoreanan disse:
Deu Certo Obrigado
De nada!
Veja se é isso que você quer:
http://codepen.io/Eziquiel/pen/NpdjqO?editors=0010