Question

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

if (q != 'Latest News'):

问题是如何仅按名称过滤结果？

（因此，如果我搜索“ Alfreds”，然后显示“ Alfreds Futterkiste”和“ Germany”，但是如果我搜索“ Germany”，则显示“ No results！”。）

Answer 1

然后，您只需要按第一列的文本进行过滤，例如：

var content = $(this).find('td:eq(0)').text();

注意1： id在同一文档中必须唯一，因此您可能需要用通用类替换重复的内容。

注意2：最好在表中使用thead/tbody标签，检查更新后的HTML波纹管。

工作示例：

var $block = $(".no-results");

$(".my-textbox").keyup(function() {
  var value = $(this).val().toUpperCase();
  var isMatch = false;

  $("#myTable tbody tr").each(function() {
    var content = $(this).find('td:eq(0)').text();

    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" />
<br>
<table id="myTable">
  <thead>
    <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="name">Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td class="name">Berglunds snabbkop</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</table>
<div class="no-results" style="display:none;"> No results!</div>

Answer 2

将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仅按名称搜索和过滤

2 个答案: