jquery - 使用 jQuery 仅按名称搜索和过滤

Question

我有一个搜索和过滤脚本:

<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”，则显示“无结果!”)。

Answer 1

将 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>