jquery表过滤器删除太多数据

Question

我的表搜索过滤器工作但它过滤了太多的数据...我有一个隐藏的div，它为用户提供了更多的数据 - 当你点击用户对话框弹出窗口显示更多的信息.​​...一旦过滤器使用它，它过滤隐藏div中的行，我希望防止发生...

如何阻止过滤器过滤隐藏的<div> ??

中的数据

JSFIDDLE：http://jsfiddle.net/7urnro7c/1/

我使用此代码我发现过滤我的表：

$("#table tr:has(td)").each(function(){
    var t = $(this).text().toLowerCase(); //all row text
        $("<td class='indexColumn'></td>").hide().text(t).appendTo(this);
});//each tr

$("#search").keyup(function(){
    var s = $(this).val().toLowerCase().split(" ");
    //show all rows.

    $("#table tr:hidden").show();
    $.each(s, function(){
        $("#table tr:visible .indexColumn:not(:contains('" + this + "'))").parent().hide();
    });//each
});//key up.

默认情况下，弹出窗口应显示所有信息，如下所示：

使用过滤器（输入bob）后，它会从弹出窗口中删除行[部门，经理，缺少就业]：

Answer 1

在您进行搜索时，您似乎只需要获取元素的文本而不需要获取子标记。快速搜索SO会产生this

他们建议这样做：

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

对于您的代码，它将类似于：

$("#table tr:has(td)").each(function(){
    var t = $(this).text().toLowerCase(); //all row text
        $("<td class='indexColumn'></td>").hide().text(t).appendTo(this);
});//each tr

$("#search").keyup(function(){
    var s = $(this).val().toLowerCase().split(" ");

    //show all rows.
    $("#table tr:hidden").show();

    //Find each techname
    $("#table tr:visible .techname").each(function(){      
        //Get on the text in the element
        var text = getText(this);

        //Loop through each search term checking if the term is in the etx
        var containsText = false;
        for(var i = 0; i < s.length; i++)
        {
            if(text.indexOf(s) > -1)
            {
                containsText = true;
                break;
            }
        }

        //If we didn't find the text hide the row
        if(!containsText)
        {
            $(this).parent().hide();
        }
    });//each
});//key up.


$('td.techname').click(function(e) {
        e.preventDefault();
        e.stopPropagation();

        var id = $(this).attr('id');

        $('div#user-'+id).dialog({ modal: true, width: 400 });
    });

function getText(selector)
{
    return $(selector)
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text()
        .toLowerCase();
}

JSFiddle Demo