Question

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

例如，如果我将滑块滑动到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

这是一个工作示例： 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();
        }
    });

});

此代码是过滤它的基本方法。子串（1）从价格中移除£。它会隐藏价格低于您输入的所有行。我希望你能适应它来解决你的问题：）

使用jQuery过滤HTML表

1 个答案: