使用 jQuery 隐藏 html 表的某些部分
考虑以下片段：
jQuery(".zoekopcat").on("keyup", function() {
var value = jQuery(this).val();
jQuery("table tr").each(function(index) {
if (index !== 0) {
row = jQuery(this);
var id = row.find("strong:contains(" + value + ")").text();
if (id.indexOf(value) !== -1) {
row.show();
} else {
row.hide();
}
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="zoekopcat">
<table>
<tr>
<td colspan=7><strong>Face</strong</td>
</tr>
<tr>
<td>Product1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Product2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td colspan=7><strong>Hands</strong</td>
</tr>
<tr>
<td>Product1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Product2</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
例如，如果我在搜索字段中输入“Face”，我希望它显示带有“Face”的 tr td 以及“Face”的产品 1 和 2，“Hands”的产品应该被隐藏......，如果我输入“手”、“脸”，它的产品应该被隐藏，等等......
我已经有以下 jQuery 代码可以运行，但是如果我在搜索字段中输入“Face”，它会显示“Face”，但不会显示相应的产品 1 和 2....
现在我应该也显示产品 1 和 2，并隐藏所有其余的......
catspeake浏览 138回答 3
3回答
-
隔江千里
这是一个使用 jquery 的解决方案.nextUntil。获取所有“标题”行（在本例中为strong第一个 td 中的行）找到与输入匹配的隐藏所有行（从头开始）循环遍历每个匹配的标题行使用 .nextUntil 查找下一个标题行（但不包括它（如“until”中））显示之间的行$(".zoekopcat").on("keyup", function() { var val = $(this).val().toUpperCase(); var headerRows = $("table tr td:first-child>strong").closest("tr"); var matchRows = headerRows.filter((i,e) => $(e).text().toUpperCase().indexOf(val) >= 0); $("table tr").hide(); matchRows.each(function() { $(this).show().nextUntil(headerRows).show(); });})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" class="zoekopcat"><table> <tr> <td colspan=7><strong>Face</strong></td> </tr> <tr> <td>Product1</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>Product2</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td colspan=7><strong>Hands</strong></td> </tr> <tr> <td>Product1</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>Product2</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr></table> -
弑天下
data向行添加标识属性有很大帮助，并使 JavaScript 代码变得非常简单。HTML：<input type="text" class="zoekopcat"><table> <tr data-category="Face"> <td colspan="7"><strong>Face</strong></td> </tr> <tr data-category="Face"> <td>Product1</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr data-category="Face"> <td>Product2</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr data-category="Hands"> <td colspan="7"><strong>Hands</strong></td> </tr> <tr data-category="Hands"> <td>Product3</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr data-category="Hands"> <td>Product4</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr></table>JavaScript：jQuery(".zoekopcat").on("keyup", function() { var value = jQuery(this).val(); jQuery("table tr").each(function() { var rowCat = $(this).data('category'); if (rowCat.toLowerCase().indexOf(value.toLowerCase()) !== -1) { $(this).show(); } else { $(this).hide(); } });});现场演示：https://jsfiddle.net/bkxLf3p0/编辑：我添加toLowerCase()了字符串比较（=不区分大小写的搜索），因为它对我来说似乎很有用 -
开满天机
首先，我修复了 HTML 中的一个小错误，即strong标签未正确终止。此外，我删除了对第一行的检查，因为这意味着Face无论搜索值如何，都会始终显示第一行。为了解决这个问题，我使用一个布尔变量shouldShow来指示是否应显示当前行。该代码像以前一样迭代表行，然后验证当前行是否包含标签strong。如果是，它会确定这是否与正在搜索的内容匹配并进行shouldShow适当的设置。shouldShow然后用于确定是显示还是隐藏该行。请参阅下面的工作片段：jQuery(".zoekopcat").on("keyup", function() { var value = jQuery(this).val(); var shouldShow = false; jQuery("table tr").each(function(index) { row = jQuery(this); if (row.find("strong").length) { var id = row.find("strong:contains(" + value + ")").text(); if (id.indexOf(value) !== -1) { shouldShow = true; } else { shouldShow = false; } } if (shouldShow) { row.show(); } else { row.hide(); } });})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" class="zoekopcat"><table> <tr> <td colspan=7><strong>Face</strong></td> </tr> <tr> <td>Product1</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>Product2</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td colspan=7><strong>Hands</strong></td> </tr> <tr> <td>Product1</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>Product2</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr></table>
随时随地看视频慕课网APP
相关分类
Html5