mgets mgets - 1 month ago 9
jQuery Question

Display Table By Price with Jquery

I'm trying to display only the rows that meet the condition, but I seem to be hiding everything with my current solution. Does anyone have an idea of what might be going wrong here, and how to fix it?



var rangeOne = "col2.alpha";

$("button.priceRangeOne").click(function(){
if ($(rangeOne < 500)) {
$("tr").css("display","none");
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<button class="priceRangeOne">$0-$499</button>

<table>
<tr class="row1 tv">
<td class="col1 alpha">Samsung</td>
<td class="col2 alpha">$499</td>
</tr>
<tr class="row2 tv">
<td class="col1 alpha">Vizio</td>
<td class="col2 alpha">$500</td>
</tr>
</table>




Answer

Try this : You can find all td with class="alpha" and then iterate them to compare amount in it.

var rangeOne = "alpha";
$("button.priceRangeOne").click(function(){
    //find all alpha tds  
    $("."+rangeOne).each(function(){
       // remove $ sign
       var amount = $(this).html().replace('$','');
       //check if it is amount and compare it
       if(!isNaN(amount) && parseInt(amount) < 500)
         $(this).closest('tr').hide();
    });

});

JSFiddle DEMO

Comments