jQuery搜索切换表行

Question

我有一个可以切换行的表格。现在我想在桌子上搜索。我的搜索功能工作但不显示隐藏的行。我怎样才能做到这一点？这是我的搜索功能。

$(document).ready(function(){
  $("#search").keyup(function(){
    var search = $(this).val();
    $("table tbody tr").hide();
    $(".header-1").show();
    $(".header-2").show();
    $("table tbody tr td:contains("+search+")").each(function(){
      $(this).closest("tr").show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="skills" id="skills" width="100%" cellspacing="0">
  <tr class="header-1">
    <th>Skill</th>
    <th colspan="2">Theoretische Kenntnisse</th>
    <th>Praktische Kenntnisse</th>
    <th class="skills_pfl">Zuletzt gepfelgt</th>
  </tr>
  <tr class="header-2">
    <th></th>
    <th class="skills_ausb">Ausgebildet</th>
    <th class="skills_ausb_jhr">Ausbildungsjahr</th>
    <th></th>
    <th></th>
  </tr>
  <tr id="74" class="skills_kat">
    <td style="text-align: left;" class="show"
        onclick="$('#body-74').toggle(300); $('#fa-74').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
        <i class="fa fa-caret-right" id="fa-74"></i> &nbsp;Anwendungsgebiete
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tbody id="body-74" class="table-body"></tbody>
  <tr id="116" class="skills_kat">
    <td style="text-align: left;" class="show"
        onclick="$('#body-116').toggle(300); $('#fa-116').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
        <i class="fa fa-caret-right" id="fa-116"></i> &nbsp;Application Server
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

有些人不理解我。搜索逻辑工作正常，但我有行，我可以通过点击切换。如果我搜索表格，这些行将不会显示。这是一个截图。

Answer 1

为什么不转动你的逻辑而隐藏只有那些你不想看到的？像这样：

$(document).ready(function() {
  var consolidatedArray = $("table tbody tr td").slice();
  $("#search").keyup(function() {
  
    var search = $(this).val();
    $("table tbody tr").show()
    $(".header-1").show();
    $(".header-2").show();
    $("table tbody tr td:not(:contains(" + search + "))").each(function() {
      $(this).closest("tr").hide();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>abc</td>
    </tr>
    <tr>
      <td>efg</td>
    </tr>
    <tr>
      <td>xsd</td>
    </tr>
    <tr>
      <td>sdf</td>
    </tr>
    <tr>
      <td>ffs</td>
    </tr>
    <tr>
      <td>abc</td>
    </tr>
  </tbody>
</table>
<input id="search" type="text"/>