CODEWITHSUNDEEP
jquerysortingfilterhtml-table
m45321
m45321

Reputation: 11

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>

Upvotes: 0

Views: 40

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 2

Related Questions