使用jQuery过滤表行 [英] Filtering Table rows using Jquery

问题描述

我找到了一个Jquery脚本，该脚本根据输入字段对表进行过滤.该脚本基本上采用过滤器，拆分每个单词，并使用每个单词过滤表行.因此，最后，您将获得一个行列表，其中在输入字段中包含所有单词.

I found a Jquery script that does the table filtering stuff based on input field. This script basically takes the filter, splits each word and filters table rows with each word. So at the end you'll have a list of rows that have all the words in the input field.

http://www.marceble.com/2010 /02/simple-jquery-table-row-filter/

var data = this.value.split(" ");

$.each(data, function(i, v){
     jo = jo.filter("*:contains('"+v+"')");
});

现在，我需要的是代替过滤包含输入字段中每个单词的行.我想过滤所有在输入字段中至少包含一个单词的行.

Now, what I need is that instead of filtering rows that contains each of the words in the input field. I want to filter all the rows that contain at least one of the word in the input field.

我尝试过的一种方法是将每个过滤后的列表放入数组中...

One way I've tried is to take each filtered lists into an array...

  var rows = new Array();

 $.each(data, function(i, v){
     rows[i] = jo.filter("*:contains('"+v+"')");
 });

在这个阶段，我必须对行"数组中的所有行进行UNION并显示它们.我不知道该怎么做.

At this stage, I have to make a UNION of all the rows in "rows" array and show them. I'm lost on how to do that exactly.

运行中的脚本上方- http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

如果我在过滤器中输入六类猫"，我想显示三行.

If I type "cat six" in the filter, I want to show three rows.

推荐答案

看看这个 jsfiddle .

这个想法是用功能来过滤通过单词循环的行.

The idea is to filter rows with function which will loop through words.

jo.filter(function (i, v) {
    var $t = $(this);
    for (var d = 0; d < data.length; ++d) {
        if ($t.is(":contains('" + data[d] + "')")) {
            return true;
        }
    }
    return false;
})
//show the rows that match.
.show();

编辑:请注意，使用:contains()选择器无法实现不区分大小写的过滤，但幸运的是，其中有 jsfiddle .

Note that case insensitive filtering cannot be achieved using :contains() selector but luckily there's text() function so filter string should be uppercased and condition changed to if ($t.text().toUpperCase().indexOf(data[d]) > -1). Look at this jsfiddle.

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