Filtrar tabela com CheckBox
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();
}
});Discussão (6)
Carregando comentários...