javascript - `search` 文本仅考虑表中的最后一列

Question

我正在尝试在表中实现搜索功能。这里出了点问题，让搜索(过滤器)只考虑表格的最后一个列。

有人能帮我找出问题所在吗？

这是现场直播:

jsFiddle

我的js:

var table = $('table');
$('#search').keyup(function () {
    var tdText = table.find('tbody tr').find('td');
    var text = $.trim($(this).val());
    if(!text){
        table.find('tbody tr').show();
    };
    tdText.filter(function() {
        var reText = $(this).text();

        if (reText.indexOf(text) >= 0) {
            $(this).parent('tr').show();
        }

        else if (reText.indexOf(text) < 0) {
            $(this).parent('tr').hide();
        }

    });
});

Answer 1

因为当您迭代每个 td 时，如果文本不匹配，您将隐藏 tr，因此当您迭代最后一个 td 时，您将隐藏该行，如果文本不匹配

var table = $('table');
$('#search').keyup(function () {
    var tdText = table.find('tbody tr').find('td');
    var text = $.trim($(this).val());
    if(!text){
        table.find('tbody tr').show();
    }else{
        table.find('tbody tr').hide();
        tdText.filter(function() {
            var reText = $(this).text();
            return reText.indexOf(text) >= 0;
        }).parent().show();
    }
});

演示:Fiddle

<小时/>

我认为你可以将其简化为

var table = $('table'), $trs = table.find('tbody tr');
$('#search').keyup(function () {
    var tdText = table.find('tbody tr').find('td');
    var text = $.trim($(this).val());
    if(!text){
        $trs.show();
    }else{
        $trs.hide().has('td:contains('+text+')').show();
    }
});

演示:Fiddle