使用 jQuery 过滤 HTML 表格

Question

我正在创建一个关于宽带的比较表，并希望在表格顶部添加一些 jQuery UI 滑块，以便您根据下载使用情况、速度等过滤数据。

例如，如果我将滑块滑动到 20GB，则只会显示下载使用量为 20GB 及以上的行。这可能吗？

我想添加这个功能来对表格进行排序：http://jqueryui.com/demos/slider/#rangemin

或者，如果这是不可能的，那么下拉就可以了。如果我必须通过 ajax 提取数据，那也可以。

这是我的 1 行表格代码。

<table>

<thead>
    <tr>
        <th class="bestseller"></th>
        <th class="device"></th>
        <th class="logo"></th>
        <th class="package">Bestsellers</th>
        <th class="speed">Speed</th>
        <th class="data">Data</th>
        <th class="term">Term</th>
        <th class="price">Price</th>
        <th class="button"></th>
    </tr>
</thead>

<tbody>

    <tr>
        <td class="bestseller">1</td><td class="device"><img alt="Dongle" class="dongle" src="images/dongles/three.png"></td>
        <td class="logo"><img alt="Logo" src="images/three.png"></td>
        <td class="package"><div class="name">Three Standard Broadband</div><div class="info">Great deal including a free dongle.</div></td>
        <td class="speed"><div class="upto">up to</div>7.2Mbps</td>
        <td class="data">15GB</td>
        <td class="term">24<div class="months">Month(s)</div></td>
        <td class="price">£15.99</td>
        <td class="button"><div class="deal">See Deal</div></td>
    </tr>
</tbody>

</table>

Answer 1

$(document).ready(function(){
    $("#input").on("keyup",function(){
        value = $(this).val().toLowerCase();
        $("#table tr").filter(function(){
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        })

    })
}) 

Answer 2

这是一个工作示例： http://jsfiddle.net/EKpGk/

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Price</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Super Phone</td>
        <td class="price">£15.99</td>
    </tr>
    <tr>
        <td>Wonder Phone</td>
        <td class="price">£25.99</td>
    </tr>
</tbody>
</table>

<br/>

Filter - enter minimum price:

<input type='text' id='filter' />

<button id='btnFilter'>Go</button>

Javascript（需要 JQuery）

$('#btnFilter').click(function() {

    var price = $('#filter').val();

    $('tr').show();

    $('tr td.price').each(function() {
        if ($(this).text().substring(1) < price)
        {
            $(this).parent().hide();
        }
    });

});

此代码是过滤它的基本方法。 substring(1) 从价格中删除 £。它隐藏价格低于您输入的价格的所有行。我希望你能适应它来解决你的问题:)