Javascript 删除过多数据的jquery表筛选器

“我的表格搜索”过滤器工作正常，但它过滤了太多数据。。。我有一个隐藏的div，它为用户提供了更多的数据-当你点击用户对话框时，弹出窗口会显示更多信息。。。。一旦使用了过滤器，它就会过滤隐藏div中的行，我想防止这种情况发生

如何防止筛选器从隐藏的

中筛选数据

JSFIDDLE：

我正在使用我找到的代码筛选我的表：

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

$（“#表tr:has（td）”）。每个（函数（）{
var t=$（this）.text（）.toLowerCase（）；//所有行文本
$（“”）.hide（）.text（t）.appendTo（this）；
});//每个tr
$（“#搜索”）.keyup（函数（）{
var s=$（this.val（）.toLowerCase（）.split（“”）；
//显示所有行。
$（“#表tr:hidden”）.show（）；
$。每个（s，函数（）{
$（“#table tr:visible.indexColumn:not（：contains（“+this+”）））”））。parent（）.hide（）；
})；//每个
});//钥匙打开。

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

使用过滤器（键入bob）后，它将从弹出窗口中删除行[部门、经理、雇用缺失]：

---

在搜索时，似乎只需要获取元素的文本，而不需要任何子标记。快速搜索SO提供

他们建议这样做：

$("#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();
}

$（“#表tr:has（td）”）。每个（函数（）{
var t=$（this）.text（）.toLowerCase（）；//所有行文本
$（“”）.hide（）.text（t）.appendTo（this）；
});//每个tr
$（“#搜索”）.keyup（函数（）{
var s=$（this.val（）.toLowerCase（）.split（“”）；
//显示所有行。
$（“#表tr:hidden”）.show（）；
//查找每个techname
$（“#table tr:visible.techname”）.each（function（）{
//获取元素中的文本
var text=getText（this）；
//循环检查每个搜索词，检查该词是否在etx中
var containsText=false；
对于（变量i=0；i-1）
{
containsText=true；
打破
}
}
//如果找不到文本，请隐藏该行
如果（！containsText）
{
$（this.parent（）.hide（）；
}
})；//每个
});//钥匙打开。
$（'td.techname'）。单击（函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
var id=$（this.attr（'id'）；
$（'div#user-'+id）.dialog（{modal:true，width:400}）；
});
函数getText（选择器）
{
返回$（选择器）
.clone（）//克隆元素
.children（）//选择所有子项
.remove（）//删除所有子项
.end（）//再次返回到所选元素
.text（）
.toLowerCase（）；
}

---

所以您只希望它应用于名称？例如，如果我输入“会计”，它不应该做任何事情？只是澄清一下，你的问题是如果我输入“Joe”，它会过滤掉“Kris Pokemon”，因为他的经理不是“Joe”？当你输入“Accounting”时，我仍然希望过滤器工作。。。但我不希望它从隐藏的分区中删除行。我想他的问题是，如果你输入“Accounting”，然后单击Bob Smith，你就看不到关于Bob的所有其他信息。@Barmar yes。。现在我将发布示例图片小提琴有很多警报：）显示过滤器上的空白弹出窗口哦！很抱歉，我告诉Chrome忽略这些提醒，但忘了里面有提醒。应该是正确的现在我试图摆弄你的代码，但仍然无法让它工作。。。啊！！抱歉@rubbrchicken我意识到我的第一次尝试误解了你的代码。我现在再看一遍。问题是这里的

$（“#表tr:visible.indexColumn:not（：contains（“+this+”））”）））”.parent（）.hide（）包含检查您可以执行类似操作的所有文本（包括标记）。这不是完美的（我现在时间有点短）如果你搜索“克里斯金融”，你会发现每个人都有财务部门的两个人。然而，它应该给你一个如何做你需要的基本想法。