搜索表行时，它不会'；t使用Javascript函数使嵌套的表标题行保持不变

我的头撞在墙上。我有一个带有嵌套表的表，在表上方有一个搜索字段。用户应在输入字段中键入一个数字，搜索应开始缩小输入了数字的行

到目前为止还不错，我可以在嵌套表中缩小范围，但目标是让父表的标题行保持不变。我想这只是少了一小片，但也许一双额外的眼睛可以帮助我

理想的解决方案是让父表中的“times”行也保持不变

以下是我的片段：

function reservationManagerListTableSearchFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“reservationManagerListTableNumberInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“表2”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}

/*以下是预订经理的日程安排部分*/
#reservationManagerScrolltbody{
高度：10公分；
/*只是为了演示*/
溢出y：自动；
/*触发垂直滚动*/
溢出-x：自动；
/*触发水平滚动*/
宽度：100px；
}
#表2 td+td{
左边框：2倍实心#F5；
字体大小：1vw；
}
#表2+th{
左边框：2倍实心#F5；
字体大小：1vw；
}
#waiterStationTableinfo td+td{
左边框：1px实心#F5；
字体大小：0.5vw；
}

按任意表搜索
11:00
11:30
12:00
12:30
13:00
13:30
14:00
14:30
17:00
17:30
18:00
18:30
19:00
19:30
20:00
20:30
21:00
21:30
22:00
服务员站1
总氮
TT
类风湿关节炎
GA
116
2顶
2.
6.
214
2顶
3.
5.
154
2顶
2.
3.
323
2顶
0
0
4顶
6顶
8顶
前10名
12顶
14顶
16顶
笨蛋

好的，我不是100%确定这是您想要的，请告诉我，我们可以再做一些

所以基本上我加了这个：

$(function(){
    $.expr[':'].containsIgnoreCase = function (n, i, m) {
        return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    $('#reservationManagerListTableNumberInput').keyup(function(e) {
        clearTimeout($.data(this, 'timer'));
        if(e.keyCode == 13)
            search(true);
        else
            $(this).data('timer', setTimeout(search, 100));
    });
});

function search(force) {
    if(this.value == '') {
        $('#table2 tbody tr').show();
        return;
    }
    var word = $('#reservationManagerListTableNumberInput')[0].value;
    var word_filter = $('#table2 tbody tr');
    if($.trim(word) != '')
        word_filter = word_filter.filter(':containsIgnoreCase('+word+')');
    $('#table2 tbody tr').hide();
    word_filter.show();
}

那这又有什么用呢？我添加的第一点是确保页面在我做任何事情之前完成加载

$(function(){

然后我对已经存在的：contains过滤器添加了一个小扩展，因为它不适用于区分大小写的文本

$.expr[':'].containsIgnoreCase = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

之后的部件将捕获输入框上的keyup（您确实不想使用onkey属性，它将被弃用）

您关心的部分如下：

search();

剩下的工作只是确保它不会在每个keyup上运行，而是只在等待时间为100毫秒时运行。它使你的代码更快，感觉更好

现在是搜索功能。。。因此，您已经做了正确的事情，主要区别在于，我只使用tbody标记来搜索，而不是搜索整个表：

$('#table2 tbody tr')

这将选择tbody标记（tr）中表2中的所有内容

然后匹配结果，隐藏所有内容，然后仅显示匹配的内容

编辑：

根据你的评论，我

$('#table2 tbody tr')