使用 jQuery 过滤 HTML 表格

Posted 2023-03-05

【中文标题】使用 jQuery 过滤 HTML 表格

【英文标题】：Filter HTML Table with jQuery

【发布时间】：2012-02-24 07:06:36

【问题描述】：

我正在创建一个关于宽带的比较表，并希望在表格顶部添加一些 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  class="dongle" src="images/dongles/three.png"></td>
        <td class="logo"><img  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>

【问题讨论】：

绝对有可能。你试过什么？

我试图实现这个blog.joshsoftware.com/2011/09/28/…，但无法弄清楚我如何输出数据。

桌子有多大？你使用的是什么表插件（如果有的话？）什么版本的 jQuery？是否需要使用 AJAX 进行过滤，还是内联过滤就足够了？

有多个大约 20 行的表格，没有使用表格插件，我使用的是 jQuery 1.7。除非 ajax 更容易，否则内联过滤就足够了？

内联过滤会很简单。

【参考方案1】：

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

    )
) 

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案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) 从价格中删除 £。它隐藏价格低于您输入的价格的所有行。我希望你能适应它来解决你的问题:)

【讨论】：

刚刚制作了一个 JSFiddle 并且在想同样的事情！ jsfiddle.net/fKn2u/10

谢谢 试试看！ p.s 可以是最高价吗？

我已经修复了您的代码：jsfiddle.net/fKn2u/16 - 只是添加了子字符串以删除 £ 并在您的内部函数之后修复了缺少的右括号:)

只需更改

我已经成功地将这个示例添加到我的表格中并添加了一个滑块，但是如果您低于 10，所有包含单个数字的行仍然会出现？