Javascript 想知道如何从特定（嵌套的、表内的表）表标题中筛选结果吗？

我一直在涉猎这段代码，只有我能做一些输入。如果可能的话，可以使用后续工作示例修改代码段。需要计算过滤器/搜索-返回的结果仅限于指定的表标题（'th/tr'-标记），即标题标题和仅在此区域内搜索，但仍显示整个单元格（标题、说明和日期）。如有任何问题，我将乐意提供帮助。

var输入、表、行、noMatches、markInstance；
$（文档）.ready（函数init（）{
输入=document.getElementById（'myInput'）；
noMatches=document.getElementById（'noMatches'）；
table=document.getElementById（'myTable'）；
行=table.querySelectorAll（'tr'）；
markInstance=新标记（表）；
input.addEventListener（'keyup'，u.debounce（ContactsearchFX，250））；
});
函数ContactsearchFX（）{
重置内容（）；
markInstance.unmark({
完成：highlightMatches
});
}
函数resetContent（）{
$（'.noMatchErrorText'）.remove（）；
//删除此行以创建搜索日志
//noMatches.textContent=''；
rows.forEach（函数（行）{
$（行）.removeClass（'show'）；
});
}
函数highlightMatches（）{
markInstance.mark（input.value{
每个：showRow，
noMatch:onNoMatches，
})
}
函数showRow（元素）{
//警报（要素）；
$（元素）.parents（'tr'）.addClass（'show'）；
$（元素）.parents（'tr'）.sibbines（'tr'）.addClass（'show'）；
//有几个巢的父母
}
函数onNoMatches（文本）{
$（“#myInput”）。之后（“
没有匹配的记录：“+text+”
”；
}

。输入换行{
边缘底部：12px；
}
#myInput:无效~。提示{
显示：块；
}
#诺马奇人：空的，
#noMatches：空+提示{
显示：无；
}
.1 tr{
显示：无；
}
.1.展示{
显示：表格行；
}
标记{
背景：橙色；
字体大小：粗体；
颜色：黑色；
}
.style1{
文本对齐：左对齐；
}

搜索标题：


提示：键入“标题1”、“标题2”、“标题3”。。。











标题
标题1
描述
说明1
日期
日期1


标题
标题2
描述
说明2
日期
日期2




标题
标题3
描述
说明3
日期
日期3




标题
标题4
描述
说明4
日期
日期4

作为上述评论的延续，由于这是您希望使用的基本内容，我将其发布在这里。 我在代码中添加了一些注释，但要点如下：

这只是一种真正基本的方法，没有使用任何库

我玩类是为了隐藏表行和标记结果

尽管我在脚本中留下了

display:none的部分表格的行，您可以操作CSS并将其从代码中删除

函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.queryselectoral（“tbody>tr”）；
对于（i=0；i-1）{//found
tr[i].style.display=“”；
tr[i].classList.add（“mark”）；//标记结果
} 
否则{//找不到
tr[i].style.display=“无”；
tr[i].classList.remove（“mark”）；//取消标记结果
}
}
如果（input.value==''）{//case，则输入是清除的
tr[i].classList.remove（“mark”）；//取消标记结果
tr[i].style.display=“无”；
}    
}
}
表{位置：相对；最小宽度：320px；}/**/
tbody tr{opacity:0；}/*这将隐藏表的信息+将在标题下显示结果*/
tr.mark{opacity:1；}/*这将显示结果行*/
/*结果行的基本样式（标记）-仅用于演示*/
tr.marktd{背景：黄色；}/*（第二）列*/
tr.marktd:first child{background:blue；}/*first col*/
tr.marktd:last child{背景：橙色；}/*第三列*/

标题
描述
日期
呜呜呜呜
说明1
日期1
雅达雅达雅达
说明2
日期2
另一个标题
说明3
日期3
作为上述评论的延续，由于这是您希望使用的基本内容，我将其发布在这里。
我在代码中添加了一些注释，但要点如下：

这只是一种真正基本的方法，没有使用任何库
我玩类是为了隐藏表行和标记结果
尽管我在脚本中留下了
display:none的部分表格的行，您可以操作CSS并将其从代码中删除

函数
#myTable table tr:first-child td mark {
    background: orange;
    font-weight: bold;
    color: black;
}
mark {
    background: initial;
}

$(document).ready(function init() {
    input = document.getElementById('myInput');
    noMatches = document.getElementById('noMatches');

    /************************************************
      NOTE ::  your last table element doesn't match your template
    ************************************************/
    table = document.querySelectorAll('#myTable table tr:first-child td');
    rows = document.querySelectorAll('#myTable table tr');

    markInstance = new Mark(table);
    input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});