javascript - 仅在使用 javascript 过滤结果后才显示 Bootstrap 表

Question

我正在使用基本过滤器功能根据 W3Schools ( https://www.w3schools.com/bootstrap4/bootstrap_filters.asp ) 搜索 Bootstrap 4 表。

这工作正常，但我想隐藏表格并在执行过滤器搜索时仅显示结果。

即网页仅显示搜索字段 - 键入内容仅显示表格的相关行。

我还不太了解 JavaScript。 我从之前的问题中发现了这一点(感谢埃文·卡罗尔!):

<div id="myId" class="d-none">Foobar</div>

$("#myId").removeClass('d-none');

这似乎有道理，但我不知道如何将此 JavaScript 与下面的现有代码结合起来 - 我应该把它放在哪里？

当前 javascript 过滤器代码:

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

Answer 1

您应该将表格包装在 div 内，并可以更新如下逻辑..

检查这个fiddle

$(document).ready(function(){
  $("#searchinput").on("keyup", function() {
   $("#myId").addClass('d-none');
    var value = $(this).val().toLowerCase();
    if(value != ''){
    $("#mainsearch tr").filter(function() {
    $("#myId").removeClass('d-none');
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    }
  });
});