Javascript 想知道如何筛选表中的嵌套表吗？
我在集成过滤器代码片段方面取得了一些成功。我发现的唯一问题是，过滤器似乎不会简单地显示表中的整个嵌套表及其基于在查询/输入中输入“title”字的详细信息。由于对JavaScript/CSS没有很好的了解，我想知道这是否可以解决。需要更多信息，请告诉我 JAVASCRIPTJavascript 想知道如何筛选表中的嵌套表吗？,javascript,html,css,Javascript,Html,Css,我在集成过滤器代码片段方面取得了一些成功。我发现的唯一问题是，过滤器似乎不会简单地显示表中的整个嵌套表及其基于在查询/输入中输入“title”字的详细信息。由于对JavaScript/CSS没有很好的了解，我想知道这是否可以解决。需要更多信息，请告诉我 JAVASCRIPT var input, table, rows, noMatches, markInstance; $(document).ready(function init() { input = document.getElem
var input, table, rows, noMatches, markInstance;
$(document).ready(function init() {
input = document.getElementById('myInput');
noMatches = document.getElementById('noMatches');
table = document.getElementById('myTable');
rows = table.querySelectorAll('tr');
markInstance = new Mark(table);
input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});
function ContactsearchFX() {
resetContent();
markInstance.unmark({ done: highlightMatches });
}
function resetContent() {
$('.noMatchErrorText').remove();
//Remove this line to have a log of searches
//noMatches.textContent = '';
rows.forEach(function(row) {
$(row).removeClass('show');
});
}
function highlightMatches() {
markInstance.mark(input.value, {
each: showRow,
noMatch: onNoMatches,
})
}
function showRow(element) {
//alert(element);
$(element).parents('tr, td').addClass('show');//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
CSS
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid ~ .hints {
display: block;
}
#noMatches:empty, #noMatches:empty + .hints {
display: none;
}
.style1 tr {
display: none;
}
.style1 .show {
display: table-row;
}
mark {
background: orange;
font-weight: bold;
color: black;
}
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（）{
重置内容（）；
取消标记（{done:highlightMatches}）；
}
函数resetContent（）{
$（'.noMatchErrorText'）.remove（）；
//删除此行以创建搜索日志
//noMatches.textContent=''；
rows.forEach（函数（行）{
$（行）.removeClass（'show'）；
});
}
函数highlightMatches（）{
markInstance.mark（input.value{
每个：showRow，
noMatch:onNoMatches，
})
}
函数showRow（元素）{
//警报（要素）；
$（element）.parents（'tr，td'）.addClass（'show'）；//如果有多个嵌套，则为parents
}
函数onNoMatches（文本）{
$（“#myInput”）。之后（“没有匹配的记录：“+text+”
”；
}
CSS
.输入包装{
边缘底部：12px；
}
#myInput:无效~。提示{
显示：块；
}
#noMatches:empty，#noMatches:empty+。提示{
显示：无；
}
.1 tr{
显示：无；
}
.1.展示{
显示：表格行；
}
标记{
背景：橙色；
字体大小：粗体；
颜色：黑色；
}
搜索标题：
提示：键入“标题1”、“标题2”、“标题3”。。。
标题1
说明1
日期1
标题2
说明2
日期2
标题3
说明3
日期3
坚持一个是完全没有意义的。我会对此投反对票，但我的代表在5zer00ne的系数下看起来不错——只是试着更接近一个合适的修复。希望这个问题对有用的程序员有意义：）Zer00ne你知道有没有上传截图的方法吗？
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"> </script>
<div class="input-wrap">
<label>
Search Titles:
<input id="myInput" type="text" required
placeholder="Search Titles" />
</label>
</div>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title1", "Title2", "Title 3"...
</p>
</div>
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<br />
<table style="width: 100%">
<tr>
<td>Title1</td>
</tr>
<tr>
<td>
<img data-src- hq="/th?id=ODL.53f33f407ba28930afd14f3d9390813c&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&pid=RichNav" alt="Iran seizes 'fuel-smuggling' tanker in Gulf" data-priority="2" id="emb6E9DDF7A" class="rms_img" src="https://www.bing.com/th?id=ODL.53f33f407ba28930afd14f3d9390813c&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&pid=RichNav" data-bm="50" width="197" height="110" />Description1</td>
</tr>
<tr>
<td>Date1</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table id="myTable0" style="width: 100%" class="style1">
<tr>
<td>
<br />
<table style="width: 100%">
<tr>
<td>Title2</td>
</tr>
<tr>
<td>
<img data-src-hq="/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&pid=RichNav" alt="Flying ants: Swarms appear on weather map as 'rain'" data-priority="2" id="emb13B6D9078" class="rms_img" src="https://www.bing.com/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&pid=RichNav" data-bm="51" width="197" height="110" />Description2</td>
</tr>
<tr>
<td>Date2</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table id="myTable1" style="width: 100%" class="style1">
<tr>
<td> </td>
</tr>
<tr>
<td>
<br />
<table style="width: 100%">
<tr>
<td>Title3</td>
</tr>
<tr>
<td>
<img data-src-hq="/th?id=ODL.c9ffada4f6eedff438c5c3c2c26b73f4&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&pid=RichNav" alt="MPs back bid to block Parliament suspension" data-priority="2" id="emb27B566CEC" class="rms_img" src="https://www.bing.com/th?id=ODL.c9ffada4f6eedff438c5c3c2c26b73f4&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&pid=RichNav" data-bm="52" width="197" height="110" />Description3</td>
</tr>
<tr>
<td>Date3</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid ~ .hints {
display: block;
}
#noMatches:empty, #noMatches:empty + .hints {
display: none;
}
.style1 tr {
display: none;
}
.style1 .show {
display: table-row;
}
mark {
background: orange;
font-weight: bold;
color: black;
}