我有一个搜索和过滤脚本:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input class="my-textbox" />
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td id="name">Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td id="name">Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
</table>
<div class="no-results" style="display:none;">No results!</div>
<script>
var $block = $(".no-results");
$(".my-textbox").keyup(function() {
var value = $(this).val().toUpperCase();
var isMatch = false;
$("#myTable tr").each(function() {
var content = $(this).html();
if (content.toUpperCase().indexOf(value) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});
</script>
问题是如何仅按名称过滤结果?
(因此,如果我搜索“Alfreds”,则显示“Alfreds Futterkiste”和“Germany”,但如果我搜索“Germany”,则显示“无结果!”)。
最佳答案
将 var content = $(this).html();
替换为 var content = $(this).find('.name').html();
。
请使用类而不是相同的 ID(id="name"
到 class="name"
)。
不要忘记通过将 :not(.header)
添加到选择器来循环遍历标题行。
$(document).ready(() => {
var $block = $(".no-results");
$(".my-textbox").keyup(function() {
var value = $(this).val().toUpperCase();
var isMatch = false;
$("#myTable tr:not(.header)").each(function() {
var content = $(this).find('.name').html();
if (content.toUpperCase().indexOf(value) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="my-textbox" />
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td class="name">Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td class="name">Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
</table>
<div class="no-results" style="display:none;">No results!</div>
关于jquery - 使用 jQuery 仅按名称搜索和过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55372891/