JQuery搜索表

时间:2016-10-06 16:34:58

标签: jquery search filter

我找到了这个jsfiddle:http://jsfiddle.net/FranWahl/rFGWZ/

$("#search").on("keyup", function() {
var value = $(this).val();

$("table tr").each(function(index) {
    if (index !== 0) {

        $row = $(this);

        var id = $row.find("td:first").text();

        if (id.indexOf(value) !== 0) {
            $row.hide();
        }
        else {
            $row.show();
        }
    }
});
});

其中JQuery用于过滤和搜索表的第一列。我一直试图修改它,所以无论表有多少列,它都会搜索所有列。

可以这样做,还是我必须事先知道列数?

P.S。 - 我试图避免数据表,因为我不需要它附带的所有额外功能。

4 个答案:

答案 0 :(得分:2)

事实证明这并不困难。这是我修改过的内容:

$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
    if (index !== 0) {
        $row = $(this);

        $row.find('td').each (function() {
            var id = $(this).text();
            if (id.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
                return false;
            }
        });  

    }
});
});

答案 1 :(得分:1)

如果你想查看你不需要使用的每一列的整行.find(" td:first")只需使用plain .text()我认为indexOf ()如果找不到则返回-1。

$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.text();

            if (id.indexOf(value) !== -1) {
                $row.show();    
            }
            else {
                $row.hide();    
            }
        }
    });
});

答案 2 :(得分:0)

数据表可以满足要求 点击这里

https://datatables.net/examples/plug-ins/range_filtering.html

答案 3 :(得分:0)

使用过滤器查找td的匹配项。然后检查长度以确保存在长度。

http://api.jquery.com/filter/

from .another_source import Bar
# or
from pkg.another_source import another_source

http://jsfiddle.net/SeanWessell/wa6q6Lnr/