jQuery 过滤表 - 排除而不是包含答案

【问题标题】：jQuery filter table - exclude instead of includejQuery 过滤表 - 排除而不是包含
【发布时间】：2020-05-25 11:53:05
【问题描述】：

我目前正在使用此代码（来自w3schools）将过滤器搜索添加到 HTML 表中：

$(document).ready(function () {
  $("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

我的问题是，是否可以让此代码排除匹配的结果而不是包含？我尝试过以各种方式操纵代码，但无济于事。诚然，我对 JS/jQuery 编码非常陌生。

【问题讨论】：

你可以试试把$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)改成$(this).toggle($(this).text().toLowerCase().indexOf(value) === -1)
@Karma Blackshaw 这样的作品，但是当您删除搜索文本时，开始行不再出现（表格为空）。
@Yevgen Gorbunkov 是的，我现在回复了。

标签： javascript jquery filter html-table

【解决方案1】：

您可以测试输入是否不是空字符串，将值存储在变量中并使用它来过滤项目：

var show = (value !== '') ? ($(this).text().toLowerCase().indexOf(value) === -1) : true;
$(this).toggle(show);

正如Karma所说，这将排除包含输入字符串的项目，但不会在输入为空时隐藏所有项目。

希望对您有所帮助。

【讨论】：

您的响应是唯一适用于所有浏览器的响应，并在搜索字段为空时返回正确的结果（在输入内容并删除之后）！非常感谢，干得好！

【解决方案2】：

您可以将 indexOf() 结果与当前结果相反：

$(document).ready(function () {
  $("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) === -1)
    });
  });
});

【讨论】：

indexOf 不可能返回低于 -1 的值。