想知道如何对嵌套表进行过滤吗？ [英] Would like to know how to have nested tables filtered?
问题描述
我在集成过滤器代码段方面取得了一些成功。我发现的问题是过滤器似乎无法在只能作为嵌套表插入的数据表上使用。不太了解JavaScript / CSS，我想知道这是否可以解决。
I have experienced some success with integrating a filter code snippet. The problem I'm finding is that the filter will not seem to pick up on my data tables which can only be inserted as nested tables. Not having a great knowledge of JavaScript/CSS I'm wondering if this can be fixed.
JAVASCRIPT
JAVASCRIPT
var input, table, rows, noMatches, markInstance;
window.onload = 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));
var input, table, rows, noMatches, markInstance;
window.onload = 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() {
noMatches.textContent = '';
rows.forEach(function(row) {
row.classList.remove('show');
});
}
function highlightMatches() {
markInstance.mark(input.value, {
each: showParantRow,
noMatch: onNoMatches,
})
}
function showParantRow(element) {
var row = element.closest('tr');
row.classList.add('show');
}
function onNoMatches(text) {
noMatches.textContent = 'No records match: "' + text + '"';
};
.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;
}
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.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 "not working", "working" ...
</p>
</div>
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<table><tr><td>not working</td></tr></table>
</td>
</tr>
<tr>
<td>
working
</td>
</tr>
</table>
推荐答案
Heyo，这是否适合您的幻想，或者您正在尝试还有别的吗
Heyo, does this suit your fancy, or were you trying for something else?
我专注于确保将 show 类添加到所有父级< tr> 匹配项的元素，并在重置时删除该类。另外，在元素周围使用$（）标签可以使您正确地获取它们的对象模型-似乎您正在尝试对HTML元素进行适当的Jquery操作。
I focused on making sure that you add the show classes to all parent <tr> elements of matched items, and remove the class on reset. Additionally, using $() tags around elements allows you to properly obtain their object model -- it seemed you were trying to do Jquery manipulation on the HTML elements proper.
CSS和HTML几乎没有改动。我也不知道noMatches和.hint应该是什么-某种反馈元素？
CSS and HTML mostly untouched. Also I have no idea what the noMatches and .hint were supposed to be -- some sort of feedback element?
HTML：
<!DOCTYPE html> <head>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>
</head>
<body>
<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 "not working", "working" ...
</p>
</div>
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<table><tr><td>not working</td></tr></table>
</td>
</tr>
<tr>
<td>
working
</td>
</tr>
</table>
</body>
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;
}
JS：
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').addClass('show');
//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
进一步嵌套...
Further Nesting...
要解决您对添加显示完整子表功能的评论，可以在JS中添加以下行： $（element）。 parent（'tr'）。siblings（'tr'）。addClass（'show'）; 。这不仅告诉父表行正确显示，而且告诉该父表的任何带有< tr> 标记的兄弟姐妹，因此只要表至少是半-正常，它将显示匹配项的表格。尝试输入标题-注意，它显示了两个表。然后尝试 Title2，并注意它仅显示相关的表，因为第一个表的< tr> 标记是表亲，而不是兄弟姐妹。
To address your comments on adding the ability to show the full sub table, one would likely add this line in JS: $(element).parents('tr').siblings('tr').addClass('show');. This tells not only the parent table row to display properly, but also any siblings of that parent that are <tr> tags, thus as long as the table is at least semi-normal, it'll show the table of the matched items. Try typing "Title" -- notice that it shows both tables. Then try "Title2", and note that it only shows the relevant table, as the <tr> tags of the first table are cousins, not siblings.
此外，我对HTML进行了一些修改。为了使其正常工作，您要么需要一个带有 id = myTable 的父表，而所有表都在该表下，或者您可以设置 myTable 作为一个类，也许在代码中进行了一些更改以说明表是一个数组的事实。
Also, I modified the HTML a bit. To have it work properly, you either need a parent table with id="myTable" that all of the tables are under, OR you can set up myTable as a class, perhaps with a few changes in the code to account for the fact that table is an array.
新HTML（新内容）：
New HTML (new content):
<!DOCTYPE html> <head>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>
</head>
<body>
<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", "Title3"...
</p>
</div>
<table id="myTable" style="width: 100%" class="style1">
<tr><td><table id="myTabledawa" 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& amp;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></td></tr>
<tr><td>
<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></td></tr>
</table>
</body>
CSS保持不变。
新的JS（小修改）：
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').addClass('show'); $(element).parents('tr').siblings('tr').addClass('show');
//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
这篇关于想知道如何对嵌套表进行过滤吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
