Фильтровать таблицу HTML с помощью jQuery

Question

Я создаю таблицу сравнения для широкополосного доступа и хочу добавить в верхнюю часть таблицы несколько слайдеров пользовательского интерфейса jQuery, которые позволят вам фильтровать данные на основе использования загрузки, скорости и т. Д.

Например, если я передвину ползунок на 20 ГБ, будут показаны только строки, которые загружаются с использованием 20 ГБ и более. Это возможно?

Я бы хотел добавить эту функцию для сортировки таблицы: 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) удаляет £ из цены.Он скрывает все строки, цена которых меньше, чем вы вводите.Я надеюсь, что вы можете адаптировать его для решения вашей проблемы:)