我创建有关宽带的比较表，并希望添加一些jQuery UI滑块表的顶部，使您可以根据下载使用中的数据进行过滤，速度等。

例如，如果我滑块滑动到20GB只能有20GB的下载使用量，并在将显示在行。这可能吗？

我想添加这个功能对表进行排序： https://m.xsw88.com/allimgs/daicuo/20230910/1001.png＆GT ;＆LT; / TD＆GT;         ＆LT; TD类=标志＆GT;＆LT; IMG ALT =标志SRC =图像/ three.png＆GT;＆LT; / TD＆GT;         ＆LT; TD类=包＆GT;＆LT; D​​IV CLASS =名与GT;三标准宽带＆LT; / DIV＆GT;＆LT; D​​IV CLASS =信息＆GT;伟大的服务，包括免费的加密狗＆LT; / DIV＆GT;＆LT ; / TD＆GT;         ＆LT; TD类=速度＆GT;＆LT; D​​IV CLASS =高达＆gt;以上至＆lt; / DIV＆GT; 7.2Mbps的＆LT; / TD＆GT;         ＆LT; TD类=数据＆GT; 15GB＆LT; / TD＆GT;         ＆LT; TD类=术语 - GT; 24＆LT; D​​IV CLASS =月＆GT;当月（S）LT; / DIV＆GT;＆LT; / TD＆GT;         ＆LT; TD类=价格＆GT; 15.99£＆LT; / TD＆GT;         ＆LT; TD类=按钮＆GT;＆LT; D​​IV CLASS =交易＆GT;看到新政＆LT; / DIV＆GT;＆LT; / TD＆GT;     ＆LT; / TR＆GT; ＆LT; / TBODY＆GT; ＆LT; /表＆gt;

解决方案

下面是一个工作的例子： http://jsfiddle.net/EKpGk/

 ＆LT;表＆gt;
＆LT; THEAD＆GT;
    ＆其中; TR＆GT;
        百分位＆GT;名称＆LT; /第i个
        百分位＆GT;价格＆LT; /第i个
    ＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT; TBODY＆GT;
    ＆其中; TR＆GT;
        ＆LT; TD＆GT;超级手机和LT; / TD＆GT;
        ＆LT; TD类=价格＆GT; 15.99£＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆其中; TR＆GT;
        ＆LT; TD＆GT;奇迹电话和LT; / TD＆GT;
        ＆LT; TD类=价格＆GT; 25.99£＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;

＆LT; BR /＆GT;

过滤器 - 输入最低价格：

＆LT;输入类型='文本'ID ='过滤器'/＆GT;

＆LT;按钮的ID ='btnFilter'＆GT; GO＆LT; /按钮＆GT;
 

使用Javascript（需要的JQuery）

  $（'＃btnFilter）。点击（函数（）{

    VAR价格= $（'＃过滤器）VAL（）。

    $（'TR'）显示（）。

    $（'TR td.price'）。每个（函数（）{
        如果（$（本）的.text（）子（1） - ;价格）
        {
            $（本）.parent（）隐藏（）。
        }
    }）;

}）;
 

这code是过滤它的基本方法。子串（1）将删除价格£。它藏有不到你输入什么代价都行。我希望你能适应它来解决你的问题：）

I am creating a comparison table about broadband and wish to add some jQuery UI Sliders to the top of the table that will enable you to filter the data based on Download Usage, Speed etc.

For example if I slide the slider to 20GB only the rows that have a download usage of 20GB and over will be shown. Is this possible?

I would like to add this functionality to sort the table: https://m.xsw88.com/allimgs/daicuo/20230910/1002.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>

Here is a working example: 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 (Requires JQuery)

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

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

    $('tr').show();

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

});

This code is a basic way of filtering it. The substring(1) removes the £ from the price. It hides all rows that have a price less than what you enter. I hope you can adapt it to solve your problem:)