使用jQuery过滤​​器HTML表格 [英] Filter HTML Table with jQuery

问题描述

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

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

我想添加这个功能对表进行排序： http://jqueryui.com/demos /滑块/＃rangemin

或者如果这是不可能的，那么下拉就可以了。如果非要通过AJAX拉的数据，那么这将是也没关系。

下面是我的$ C $下表中有1行。

 ＆LT;表＆gt;

＆LT; THEAD＆GT;
    ＆其中; TR＆GT;
        百分位类=畅销书＆GT;＆LT; /第i个
        百分位类=设备＆GT;＆LT; /第i个
        百分位类=标志＆GT;＆LT; /第i个
        百分位级=包装＆GT;畅销产品＆LT; /第i个
        百分位类=速度＆GT;速度和LT; /第i个
        百分位类=数据＆GT;数据＆LT; /第i个
        百分位类=术语＆GT;条款＆所述; /第i个
        百分位级=价格＆GT;价格＆LT; /第i个
        百分位级=按钮＆GT;＆LT; /第i个
    ＆LT; / TR＆GT;
＆LT; / THEAD＆GT;

＆LT; TBODY＆GT;

    ＆其中; TR＆GT;
        ＆LT; TD类=畅销书＆GT; 1＆LT; / TD＆GT;＆LT; TD类=设备＆GT;＆LT; IMG ALT =加密狗级=加密狗SRC =图像/加密狗/ three.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: http://jqueryui.com/demos/slider/#rangemin

Or if that is not possible then a drop down would be fine. If I have to pull the data in via ajax then that would be fine too.

Here is my code for the table with 1 row.

<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>

解决方案

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:)

这篇关于使用jQuery过滤​​器HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！