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.

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

使用过滤器（键入鲍勃）后，它会从弹出窗口中删除行[部门，经理，职位缺失]：

Answer 1

看起来您在搜索时仅需要获取元素的文本，而无需获取任何child标记。 快速搜索，以便给人这种

他们建议这样做：

$("#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演示