使用 Jquery 按价格显示表格答案

【问题标题】：Display Table By Price with Jquery使用 Jquery 按价格显示表格
【发布时间】：2014-12-23 20:17:10
【问题描述】：

我试图只显示满足条件的行，但我似乎用我当前的解决方案隐藏了所有内容。有谁知道这里可能出了什么问题，以及如何解决它？

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>

【问题讨论】：

$(rangeOne < 500) 是很奇怪的东西。
@NishanSenevirathna 有var rangeOne = "alpha"; 在这个变量的使用上面三行。
是的，但是这是什么意思呢？ $(rangeOne
@NishanSenevirathna 这是对 jQuery 的坏了解 :) 这是关于将 $(".alpha") 元素的文本编号与 500 进行比较。

标签： jquery sorting filter html-table

【解决方案1】：

试试这个：你可以找到所有带有 class="alpha" 的td，然后迭代它们以比较其中的数量。

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

【讨论】：

@Regent，是的，你关于使用var rangeOne = ".alpha" 的建议是正确的，但我保持原样，因为可能 OP 有其他用途。对于非金额 td，我已经用isNaN() 条件更新了答案。谢谢你的建议，谢谢:)
不客气 :) 好吧，是的，它可能在其他任何地方都使用过，尽管我怀疑它不会。但这是 OP 业务，+1。