时间戳

首页 > 解决方案 > 过滤前隐藏引导表

html - 过滤前隐藏引导表

问题描述

我有一个引导 html 表。过滤用于现场。如何确保在过滤开始之前隐藏表格内容？过滤脚本和html表：

$(document).ready(function(){
    $("#surname").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#table tr").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
<table class="table" id="table">
    <thead class="thead-light">
      <tr>
           <th></th> 
        <th class="text-center" scope="col">Guest</th>
        <th class="text-center" scope="col">Org</th>

标签： htmljquerybootstrap-4

解决方案

Bootstrap v4用于d-none将任何内容设置为“显示：无”。

在每个上设置每个<tr class="d-none">，默认情况下它们将被隐藏。在您的代码中，就在您过滤完所有内容之后，让我们使用 jquery 再次显示它们（未测试）：

    /* ... */
    $("#table tr").filter(function () {
      const show = $(this).text().toLowerCase().indexOf(value) > -1;
      if (show) {
        $(this).removeClass('d-none');
      }
    });

推荐阅读