jQuery表行按列过滤 [英] jQuery Table Row Filtering by Column

问题描述

我正在尝试以智能的方式过滤表格行（而不是只有大量的代码才能最终完成工作），而是一种相当干燥的灵感。

I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.

我的表中有5列。在每个顶部都有一个下拉列表或文本框，用户可以使用该文本框过滤表数据（基本上隐藏不适用的行）

I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)

很多用于jQuery的表过滤插件，但没有一个像这样工作，这就是复杂的部分：|

There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|

推荐答案

这是一个基本过滤示例 http://jsfiddle.net/urf6P/3/

Here is a basic filter example http://jsfiddle.net/urf6P/3/

它使用jquery选择器：contains（'some text'）和：not（：contains（'some text'））来决定是否应该显示或隐藏每一行。这可能会让你朝着一个方向前进。

It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.

编辑以包含来自jsfiddle的HTML和javascript：

EDITED to include the HTML and javascript from the jsfiddle:

$(function() {    
    $('#filter1').change(function() { 
        $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
        $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});

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