使用 jQuery 过滤 HTML 表格

关键词：

【中文标题】使用 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，所有包含单个数字的行仍然会出现？

如何使用 jQuery 在表格行单击时过滤表格中的数据？

】如何使用jQuery在表格行单击时过滤表格中的数据？【英文标题】：HowcanIfilterdatainatableontablerowclickusingjQuery?【发布时间】：2020-12-2219:48:18【问题描述】：我的站点中有一张桌子，上面有玩家姓名和服务器。但我需要它们是可点... 查看详情

jQuery滑块范围：应用范围作为表格行的过滤器

...表格必须只显示介于你给它的值之间的行。我为rangeslider使用了jQueryUI，并且我有一个普通的HTML表格。我无法让它工作，我尝试了很多不同的方法。这是我的 查看详情

如何使用简单的 javascript 过滤 html 表格？

】如何使用简单的javascript过滤html表格？【英文标题】：Howtofilterahtmltableusingsimplejavascript?【发布时间】：2018-12-1317:02:21【问题描述】：我有一个过滤表格的代码。它将仅基于第一列进行过滤。如何让它单独过滤第二列。还有如何... 查看详情

jQuery 表格行按列过滤

...列。每个顶部都有一个下拉列表或一个文本框，用户可以使用它来过滤表格数据（基本上隐藏不适用的行）有很多用于jQuery的表格过滤插件，但没有一个能像这样工作，这就是复杂的部分：| 查看详情

通过jquery实时监听表格行数变化(代码片段)

[本文出自天外归云的博客园]使用bootstraptable组件，当使用过滤器的时候，页面的表格行数发生变化，此时需要统计表格行数。想要监听表格变化，如何做呢？使用场景：有一个表格里放着许多测试用例，当使用过滤器的时候表... 查看详情

html使用jquery过滤div(代码片段)

查看详情

使用jquery实现简单的表格分页-表头不变

 点击页码1、页码2的效果 实现步骤 1、首先加入jquery的js链接<scripttype="text/javascript"src="jquery-3.2.1.min.js"></script> 2、HTML代码1<tableborder="1">2<thead><!--加个thead方便过滤表头， 查看详情

基于 Datatable Jquery 的插件 - 表格 - 表格中可折叠的问题 - Javascript/HTML

...关注可以按结果过滤和排序的护理访问。尽管我从未真正使用过Javascri 查看详情

使用 jquery 动态更新 DataTable 内容

】使用jquery动态更新DataTable内容【英文标题】：UpdatetheDataTablecontentsdynamicallyusingjquery【发布时间】：2017-04-1518:02:37【问题描述】：我有一个带有空tbody的HTML表，它在选择一些过滤器（通常是选择选项）时填充到jquery函数中。如果... 查看详情

从网站构建器html内容框中，使用javascript从google电子表格中过滤文本/名称

...容框中的字符数量有限。但我需要包含更多内容。现在我使用谷歌电子表格处理更多内容。我已经在我的代码中包含了一个iFrame来查看电子表格。但我不知道如何使用javascript代码从电子表格中过滤名称。请帮我。提前致谢。这... 查看详情

jQuery DataTables 'OR' 搜索/过滤

...过滤【发布时间】：2014-10-1212:05:10【问题描述】：我正在使用jQueryDataTables(http://www.datatables.net/)来显示一些表格数据。搜索/过滤器是一个强大的功能。虽然如果在表格中搜索多个关 查看详情

如何在 JQuery 数据表中重置分页

...用户过滤服务器上的结果。当用户更改过滤器表单时，我使用新的过滤器数据调用fnReloadAjax()，然后使用新的过滤结果重新绘制表格。我遇到的问题是分页卡住了，即使表格 查看详情

使用 jQuery 即时构建 HTML 表格

】使用jQuery即时构建HTML表格【英文标题】：BuildinganHTMLtableontheflyusingjQuery【发布时间】：2010-09-1108:03:22【问题描述】：以下是我用来动态构建HTML表的代码（使用从服务器接收的JSON数据）。在加载数据时，我会显示一个动画请稍... 查看详情

javaweb04-html篇笔记

...案例：1.1.1需求：对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果.1.1.2分析：1.1.2.1技术分析：【JQuery的选择器】基本过滤选择器：odd：even:【JQuery中添加和移除样式】如果样式没有事先定义,可以使用css方法为奇数行... 查看详情

如何使用 jQuery 动态创建 HTML 表格？

】如何使用jQuery动态创建HTML表格？【英文标题】：HowdoIcreateHTMLtableusingjQuerydynamically?【发布时间】：2013-09-2116:18:18【问题描述】：我正在尝试使用jQuery动态创建如下HTML表：<tableid=\'providersFormElementsTable\'><tr><td>Nickname... 查看详情

jQuery 可滚动、可排序、可过滤的表格

】jQuery可滚动、可排序、可过滤的表格【英文标题】：jQueryScrollable,Sortable,Filterabletable【发布时间】：2010-09-1614:18:29【问题描述】：我希望利用jQuery来处理我们对不同大小的数据表的一些非常常见的请求：滚动、排序和动态过滤... 查看详情

使用 jQuery 修改 HTML 表格的结构

】使用jQuery修改HTML表格的结构【英文标题】：ModifyingthestructureofaHTMLtablewithjQuery【发布时间】：2010-09-2016:36:38【问题描述】：我有一个元素列表（以下示例中的X）显示在HTML表格的一行或一列中。从HTML代码的角度来看，我有（水... 查看详情

如何使用 Jquery 冻结 HTML 表格的标题和列

】如何使用Jquery冻结HTML表格的标题和列【英文标题】：HowtofreezeaHeaderandColumnsofaHTMLtableusingJquery【发布时间】：2019-12-0920:51:32【问题描述】：我正在尝试修复标题和列，并使用Jquery更改它们的表格背景颜色。我已经从一些Json数据... 查看详情